在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架构
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'],
},
})以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章中主要介绍了React.js中常用的ES6写法总结（推荐），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
本文我们将和大家一起来研究如何有效地将组件解耦,让我们的代码变的复用性极高,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了关于react-draggable实现拖拽功能的相关资料,React-Draggable一个使元素可拖动的简单组件,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了React触发render的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了用React的状态管理,简简单单实现一个颜色转换器,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-08-08
React Hooks 是 React 16.8 引入的新特性，允许我们在不使用 Class 的前提下使用 state 和其他特性。接下来通过本文给大家分享React Hooks使用避坑指南，一起学习下吧2021-06-06
这篇文章主要介绍react实现路由拦截的,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了在 React Native 中给第三方库打补丁的过程解析,有时使用了某个React Native 第三方库，可是它有些问题，我们不得不修改它的源码，本文介绍如何修改源码又不会意外丢失修改结果的方法，需要的朋友可以参考下2022-08-08
React router cache route实现缓存页面流程介绍
react-router自身没有路由缓存的特性，在5.x版本之前，我们可以基于react-router-cache-route来实现路由缓存功能。但是react-router 6.x在实现上做了比较大的变化，react-router-cache-route没有提供相应的支持2023-01-01
最新评论