安裝

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'

配置

預檢（樣式重置）

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

?rollup.config.js?

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

Safelist

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

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

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

?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

在服務器啟動時，vite-plugin-windicss 將掃描您的源代碼并提取實用程序用法。默認情況下，僅包含 src/ 下擴展名為 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
      },
    }),
  ],
}

更多

有關更多配置參考，請參閱 options.ts。