react使用windicss
参考官方文档Webpack 集成 {#integration-for-webpack} | Windi CSS
react 支持craco框架
windicss有什么不理解的可以参考Tailwind CSS 中文文档
1. 安装 windicss架构
yarn add windicss-webpack-plugin -D # npm i windicss-webpack-plugin -D
2. 安装craco
npm install @craco/craco
3. 根目录下创建 craco.config.js
// craco.config.js
const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
module.exports = {
// ...
webpack: {
plugins: {
add: [
new WindiCSSWebpackPlugin({
virtualModulePath: 'src',
}),
],
},
},
}
4. 修改package.json
将react-scripts修改为craco
// package.json
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
+ "eject": "craco eject"
5. 在src/index.js 添加如下内容
import './virtual:windi.css'
6. 根目录下创建 windi.config.js
// windi.config.js
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
extract: {
include: ['**/*.{jsx,js,css,html}'],
exclude: ['node_modules', '.git', '.next'],
},
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。