在react中使用windicss的問題
更新時(shí)間：2022年10月09日 10:27:07 作者：qq_48557089
這篇文章主要介紹了在react中使用windicss的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
react使用windicss
參考官方文檔 Webpack 集成 {#integration-for-webpack} | Windi CSS
react 支持craco框架
windicss有什么不理解的可以參考 Tailwind CSS 中文文檔
1. 安裝 windicss架構(gòu)
yarn add windicss-webpack-plugin -D # npm i windicss-webpack-plugin -D
2. 安裝craco
npm install @craco/craco
3. 根目錄下創(chuàng)建 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 添加如下內(nèi)容
import './virtual:windi.css'
6. 根目錄下創(chuàng)建 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'],
? },
})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
手動(dòng)用webpack搭建第一個(gè)ReactApp的示例
本篇文章主要介紹了手動(dòng)用webpack搭第一個(gè) ReactApp的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
React前端解鏈表數(shù)據(jù)結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了React前端解鏈表數(shù)據(jù)結(jié)構(gòu)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
本文主要介紹了淺談React底層實(shí)現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
React移動(dòng)端項(xiàng)目之pdf預(yù)覽問題
這篇文章主要介紹了React移動(dòng)端項(xiàng)目之pdf預(yù)覽問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
筆者最近用react useEffect閉包，其中踩到了一些坑在此與大家分享一下。需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
解決React報(bào)錯(cuò)Property 'X' does not
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React-hooks面試考察知識點(diǎn)匯總小結(jié)(推薦)
這篇文章主要介紹了React-hooks面試考察知識點(diǎn)匯總,Hook?使你在無需修改組件結(jié)構(gòu)的情況下復(fù)用狀態(tài)邏輯，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
解決React報(bào)錯(cuò)The?tag?is?unrecognized?in?this?browser
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)The?tag?is?unrecognized?in?this?browser示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
在React中如何優(yōu)雅的處理事件響應(yīng)詳解
這篇文章主要給大家介紹了關(guān)于在React中如何優(yōu)雅處理事件響應(yīng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要為大家介紹了styled-components?的性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01