在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'],
},
})以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了手动用webpack搭第一个 ReactApp的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家介绍了React前端解链表数据结构示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本文主要介绍了浅谈React底层实现原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了React移动端项目之pdf预览问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
笔者最近用react useEffect闭包，其中踩到了一些坑在此与大家分享一下。需要的朋友们下面随着小编来一起学习学习吧2021-06-06
解决React报错Property 'X' does not
这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了React-hooks面试考察知识点汇总,Hook 使你在无需修改组件结构的情况下复用状态逻辑，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
解决React报错The tag is unrecognized in this browser
这篇文章主要为大家介绍了解决React报错The tag is unrecognized in this browser示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要给大家介绍了关于在React中如何优雅处理事件响应的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
这篇文章主要为大家介绍了styled-components 的性能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最新评论