日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

在react中使用windicss的問題_React

作者：qq_48557089 ? 更新時間： 2022-11-21 編程語言

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

原文鏈接：https://blog.csdn.net/qq_48557089/article/details/121852657

欄目分類
最近更新