Windi CSS webpack
选择合适的插件
Windi CSS Webpack 插件是一种与语言和框架无关的方式，用于在 webpack 应用程序中实现 Windi CSS。
一流的框架支持
如果在下面，请使用专门为您的框架构建的插件。
| 框架 | |
|---|---|
| Nuxt.js | nuxt-windicss |
| Svelte | svelte-windicss-preprocess |
| Vue CLI | vue-cli-plugin-windicss |
| Gridsome | gridsome-plugin-windicss |
二级框架支持
已成功设置和记录以与 Windi 一起使用的框架。
| 框架 | |
|---|---|
| Next.js | Install - Example |
| CRACO | Install - Example |
| Storybook | Install - Example |
| Umi.js | Example |
不支持的框架
已使用此软件包进行测试但无法正常工作的框架。
- ❌ 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。
代码示例
请参阅示例项目的示例。
更多建议：