目录React使用windiCSS1. 安装 windicss架构2. 安装craco3. 根目录下创建 craco.config.js 4. 修改package.JSON
参考官方文档 webpack 集成 {#integration-for-WEBpack} | Windi CSS
react 支持craco框架
windicss有什么不理解的可以参考 Tailwind CSS 中文文档
yarn add windicss-webpack-plugin -D
# npm i windicss-webpack-plugin -D
npm install @craco/craco
// craco.config.js
const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
module.exports = {
// ...
webpack: {
plugins: {
add: [
new WindiCSSWebpackPlugin({
virtualModulePath: 'src',
}),
],
},
},
}
将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"
import './virtual:windi.css'
// windi.config.js
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
extract: {
include: ['**/*.{jsx,js,css,html}'],
exclude: ['node_modules', '.git', '.next'],
},
})
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: 在react中使用windicss的问题
本文链接: https://lsjlt.com/news/168996.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0