WindiCSS
开始
安装
webpack
npm i windicss-webpack-plugin -D
配置
const WindiCSSWebpackPlugin = require('windicss-webpack-plugin');
...
plugins: [
new WindiCSSWebpackPlugin(),
...
]
引入虚拟模块
// main.js
import 'windi.css'
import "virtual:windi.css"; // vite
配置
基础配置
// windi.config.js
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'],
},
});
继承配置
import { defineConfig } from "windicss/helpers";
export default defineConfig({
/* 配置项... */
corePlugins: { // corePlugins控制类开启
container: false,
},
});
预检样式
preflight: false // 关闭所有预定义样式
preflight: {
safelist: 'h1 h2 h3 p img', // 仅开启白名单样式
}
