React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react使用windicss

在react中使用windicss的问题

作者:qq_48557089

这篇文章主要介绍了在react中使用windicss的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文