Windi CSS webpack

选择合适的插件

Windi CSS Webpack 插件是一种与语言和框架无关的方式，用于在 webpack 应用程序中实现 Windi CSS。

一流的框架支持

如果在下面，请使用专门为您的框架构建的插件。

二级框架支持

已成功设置和记录以与 Windi 一起使用的框架。

不支持的框架

已使用此软件包进行测试但无法正常工作的框架。

• ❌ Angular

安装

如果您正在使用自定义 webpack 构建进​​行设置，请报告您发现的任何问题。

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

如果您之前使用的是 Tailwind，请参阅迁移指南。

配置webpack

您需要将插件添加到您的 webpack 配置中。如果您有权直接修改 webpack.config.js，则可以执行以下操作。

​webpack.config.js​

import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'

export default {
  // ...
  plugins: [
    new WindiCSSWebpackPlugin(),
  ],
}

非 ES 模块安装

对于不支持 es 模块导入语法的 webpack 配置，您可以尝试以下操作。

​webpack.config.js​

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

export default {
  // ...
  plugins: [
    new WindiCSSWebpackPlugin(),
  ],
}

包含虚拟模块

在入口点文件或仅加载一次的文件中，添加导入。

ESM

​main.js​

import 'windi.css'

CJS

​main.js​

require('windi.css')

Windi 配置

如果您还没有名为 windi.config.ts 的文件，请将其添加到您的项目根目录中。

扫描

如果您在启动 Windi 时遇到问题，没有选择您的课程，您可能需要修改扫描。

在服务器启动时，Windi 将扫描您的代码并提取实用程序用法。默认情况下，只有 src/ 下扩展名为“html”、“vue”、“md”、“mdx”、“pug”、“jsx”、“tsx”、“svelte”、“ts”、“js”的文件， “css”、“postcss”将包含在内。

​windi.config.ts​

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    // A common use case is scanning files from the root directory
    include: ['**/*.{vue,html,jsx,tsx}'],
    // if you are excluding files, make sure you always include node_modules and .git
    exclude: ['node_modules', '.git', 'dist'],
  },
})

配置

预检（样式重置）

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

​windi.config.ts​

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  preflight: false,
})

Safelist

默认情况下，我们会静态扫描您的源代码并找到实用程序的所有用法，然后按需生成相应的 CSS。但是，存在一些限制，即无法有效匹配在运行时决定的实用程序，例如

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

为此，您需要在 windi.config.ts 的安全列表选项中指定可能的组合。

​windi.config.ts​

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  safelist: 'p-1 p-2 p-3 p-4',
})

或者你可以这样做

​windi.config.ts​

import { defineConfig } from 'windicss/helpers'

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

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

图层排序

默认情况下，导入 windi.css 或 virtual:windi.css 将导入所有三层，顺序为基础 - 组件 - 实用程序。如果您想更好地控制订单，可以通过以下方式将它们分开：

- import 'virtual:windi.css'
+ import 'virtual:windi-base.css'
+ import 'virtual:windi-components.css'
+ import 'virtual:windi-utilities.css'

您还可以让您的自定义 CSS 能够被某些层覆盖：

  import 'virtual:windi-base.css'
  import 'virtual:windi-components.css'
+ import './my-style.css'
  import 'virtual:windi-utilities.css'

完整配置

有关完整的配置详细信息，请参阅 options.ts。

安装示例

Next.js

​next.config.js​

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

module.exports = {
  // ...
  webpack(config) {
    config.plugins.push(new WindiCSSWebpackPlugin())
    return config
  },
}

​pages/_app.js​

import 'windi.css'

​windi.config.js​

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['**/*.{jsx,tsx,css}'],
    exclude: ['node_modules', '.git', '.next'],
  },
})

注意：JSX 的使用是实验性的。请报告您发现的任何问题。

创建 React 应用程序 - CRACO

​craco.config.js​

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

module.exports = {
  // ...
  webpack: {
    plugins: {
      add: [
        new WindiCSSWebpackPlugin({
          virtualModulePath: 'src',
        }),
      ],
    },
  },
}

​src/index.js​

import './windi.css'

​windi.config.ts​

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['**/*.{jsx,js,css,html}'],
    exclude: ['node_modules', '.git', '.next'],
  },
})

注意：JSX 的使用是实验性的。请报告您发现的任何问题。

无 ES 模块

对于不支持 es 模块导入语法的 webpack 配置，您可以尝试以下操作。

​webpack.config.js​

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

export default {
  // ...
  plugins: [
    new WindiCSSWebpackPlugin(),
  ],
}

// main.js
require('windi.css')

Storybook

​.storybook/main.js​

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

module.exports = {
  // ...
  webpackFinal: (config) => {
    config.plugins.push(new WindiCSSWebpackPlugin())
    return config
  },
}

​.storybook/preview.js​

import 'windi.css'

警告：CSS 预处理器（如 SCSS、LESS）不适用于@apply，请使用纯 css。

代码示例

请参阅示例项目的示例。