Windi CSS Rollup

安裝

npm i rollup-plugin-windicss -D # yarn add rollup-plugin-windicss -D

?rollup.config.js?

import WindiCSS from 'rollup-plugin-windicss'

export default {
  plugins: [
    ...WindiCSS(),
  ],
}

// your code entry
import 'virtual:windi.css'

配置

預(yù)檢（樣式重置）

Preflight是按需啟用的，如果你想完全禁用它，你可以配置如下

?rollup.config.js?

export default {
  plugins: [
    WindiCSS({
      preflight: false,
    }),
  ],
}

Safelist

默認(rèn)情況下，我們會靜態(tài)掃描您的源代碼并找到實(shí)用程序的所有用法，然后按需生成相應(yīng)的 CSS。但是，存在一些限制，即無法有效匹配在運(yùn)行時(shí)決定的實(shí)用程序，例如

<!-- will not be detected -->
<div className={`p-${size}`}>

為此，您需要在 vite.config.js 的安全列表選項(xiàng)中指定可能的組合。

?rollup.config.js?

export default {
  plugins: [
    WindiCSS({
      safelist: 'p-1 p-2 p-3 p-4',
    }),
  ],
}

或者你可以這樣做

function range(size, startAt = 1) {
  return Array.from(Array(size).keys()).map(i => i + startAt)
}

// rollup.config.js
export default {
  plugins: [
    WindiCSS({
      safelist: [
        range(30).map(i => `p-${i}`), // p-1 to p-3
        range(10).map(i => `mt-${i}`), // mt-1 to mt-10
      ],
    }),
  ],
}

Scanning

在服務(wù)器啟動時(shí)，vite-plugin-windicss 將掃描您的源代碼并提取實(shí)用程序用法。默認(rèn)情況下，僅包含 src/ 下擴(kuò)展名為 vue、html、mdx、pug、jsx、tsx 的文件。如果要啟用掃描其他文件類型的位置，可以通過以下方式配置：

?rollup.config.js?

export default {
  plugins: [
    WindiCSS({
      scan: {
        dirs: ['.'], // all files in the cwd
        fileExtensions: ['vue', 'js', 'ts'], // also enabled scanning for js/ts
      },
    }),
  ],
}

更多

有關(guān)更多配置參考，請參閱 options.ts。