在react中使用windicss的問題
更新時間：2022年10月09日 10:27:07 作者：qq_48557089
這篇文章主要介紹了在react中使用windicss的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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'],
? },
})以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章中主要介紹了React.js中常用的ES6寫法總結(jié)（推薦），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本文我們將和大家一起來研究如何有效地將組件解耦,讓我們的代碼變的復(fù)用性極高,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
react-draggable實現(xiàn)拖拽功能實例詳解
這篇文章主要給大家介紹了關(guān)于react-draggable實現(xiàn)拖拽功能的相關(guān)資料,React-Draggable一個使元素可拖動的簡單組件,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了React觸發(fā)render的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進(jìn)行綁定，節(jié)后實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
基于React的狀態(tài)管理實現(xiàn)一個簡單的顏色轉(zhuǎn)換器
這篇文章主要介紹了用React的狀態(tài)管理,簡簡單單實現(xiàn)一個顏色轉(zhuǎn)換器,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-08-08
React Hooks 是 React 16.8 引入的新特性，允許我們在不使用 Class 的前提下使用 state 和其他特性。接下來通過本文給大家分享React Hooks使用避坑指南，一起學(xué)習(xí)下吧2021-06-06
這篇文章主要介紹react實現(xiàn)路由攔截的,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
在?React?Native?中給第三方庫打補(bǔ)丁的過程解析
這篇文章主要介紹了在?React?Native?中給第三方庫打補(bǔ)丁的過程解析,有時使用了某個React Native 第三方庫，可是它有些問題，我們不得不修改它的源碼，本文介紹如何修改源碼又不會意外丟失修改結(jié)果的方法，需要的朋友可以參考下2022-08-08
React router cache route實現(xiàn)緩存頁面流程介紹
react-router自身沒有路由緩存的特性，在5.x版本之前，我們可以基于react-router-cache-route來實現(xiàn)路由緩存功能。但是react-router 6.x在實現(xiàn)上做了比較大的變化，react-router-cache-route沒有提供相應(yīng)的支持2023-01-01