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'

配置

预检（样式重置）

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

​rollup.config.js​

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

Safelist

默认情况下，我们会静态扫描您的源代码并找到实用程序的所有用法，然后按需生成相应的 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。