在react中使用windicss的问题

目录react使用windicss1.安装windicss架构2.安装craco3.根目录下创建craco.config.js4.修改package.json5.在src/index.j...

目录

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'],
 },
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。