如何利用windicss在React项目中实现高效样式定制？

本文共计388个文字，预计阅读时间需要2分钟。

目录 + React 使用 Windicss + 1. 安装 Windicss 框架 + 2. 安装 craco + 3. 在根目录下创建 craco.config.js + 4. 修改 package.json + 5. 在 src/index.js 中添加以下内容 + 6. 在根目录下创建 windi.config.js + React 使用 Windicss 参考官方文档

目录

• react使用windicss
• 1. 安装 windicss架构
• 2. 安装craco
• 3. 根目录下创建 craco.config.js
• 4. 修改package.json
• 5. 在src/index.js 添加如下内容
• 6. 根目录下创建 windi.config.js

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。