返回顶部
首页 > 资讯 > 前端开发 > JavaScript >在react中使用windicss的问题
  • 224
分享到

在react中使用windicss的问题

2024-04-02 19:04:59 224人浏览 独家记忆
摘要

目录React使用windiCSS1. 安装 windicss架构2. 安装craco3. 根目录下创建 craco.config.js 4. 修改package.JSON

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 在react中使用windicss的问题

本文链接: https://lsjlt.com/news/168996.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 在react中使用windicss的问题
    目录react使用windicss1. 安装 windicss架构2. 安装craco3. 根目录下创建 craco.config.js 4. 修改package.json...
    99+
    2024-04-02
  • 在react中使用tailwind的问题
    目录react使用tailwind效果图react使用tailwind 现创建react项目 npx create-react-app name 进入创建的项目文件夹,安装tailw...
    99+
    2024-04-02
  • React中使用react-file-viewer问题
    目录使用react-file-viewerreact-file-viewer预览本地文件解决思路使用react-file-viewer 1.npm install react-fil...
    99+
    2024-04-02
  • 在React中使用Redux解决的问题小结
    目录在 React 中使用 Redux 解决的问题在 React 项目中加入 Redux 的好处React + Redux 安装 ReduxReact 中 Redux 的工作流程Re...
    99+
    2022-11-13
    React + Redux 案例 React 使用 Redux
  • React中useEffect使用问题怎么解决
    本篇内容介绍了“React中useEffect使用问题怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言最近看了一下 ant-des...
    99+
    2023-07-02
  • 关于 React 中 useEffect 使用问题浅谈
    目录前言优化前优化后总结前言 最近看了一下 ant-design 中的 tree 组件源码时发现 useEffect 中根据 props 来计算当前函数组件的 state 的,感到好...
    99+
    2024-04-02
  • React Navigation使用中遇到的问题有哪些
    小编给大家分享一下React Navigation使用中遇到的问题有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!在React Native的开发中,使用到react navigati...
    99+
    2024-04-02
  • 解决react-connect中使用forwardRef遇到的问题
    目录react-connect使用forwardRef遇到的问题项目场景原因问题描述解决方案React.forwardRef的使用说明应用场景但问题来了总结react-connect...
    99+
    2023-05-20
    react-connect使用forwardRef 使用forwardRef遇到问题 react-connect使用forwardRef问题
  • react如何在React html中使用
    本篇文章为大家展示了react如何在React html中使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。基本使用<!DOCTYPE html><html l...
    99+
    2023-06-14
  • 解决React中的re-render问题
    目录re-render?错误的优化Object.is合理使用useEffect,解决re-render简单实现useEffect文章转自公众号:前端巅峰 re-render? 首先使...
    99+
    2024-04-02
  • React 18中的state概念与使用、注意问题解决
    目录一、概念与基本使用二、注意问题引出问题产生问题的原因问题演示解决问题一、概念与基本使用 props中的所有属性都是不可变的,这使得React组件不能随着props的改变而改变。但...
    99+
    2022-12-15
    React state概念与使用 React18 state概念
  • Java在重载中使用Object的问题
    目录在重载中使用Object在开发中遇到了两个方法不是说先匹配类型相同的吗?解决办法Object的使用:重载equals、hashCode及实现compareTo下面是一个简单的例子...
    99+
    2024-04-02
  • 在 React 中使用 i18next的示例
    目录1. 安装依赖2. 在src下创建i18n文件夹2.1 common下的zh-CN.js2.2 common下的en-US.js2.3 在common的index.js文件中引入...
    99+
    2023-01-06
    React 使用 i18next React  i18next
  • 如何解决React使用browserHistory项目访问404的问题
    这篇文章主要介绍了如何解决React使用browserHistory项目访问404的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。最近项...
    99+
    2024-04-02
  • 在React中如何使用Vuex
    这篇文章给大家分享的是有关在React中如何使用Vuex的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。如何使用一:创建Store实例:与vuex一样,使用单一状态树(一个对象)包...
    99+
    2024-04-02
  • props怎么在react中使用
    这篇文章给大家介绍props怎么在react中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。组件的props( props是一个对象 )作用:接收传递给组件的数据特点:可以给组件传递任意类型的数据props是只读的...
    99+
    2023-06-14
  • Hook怎么在React中使用
    Hook怎么在React中使用?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1、useState:让函数式组件拥有状态用法示例:// 计数器impor...
    99+
    2023-06-14
  • hook如何在react中使用
    今天就跟大家聊聊有关hook如何在react中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1、什么是hook?react hook是react 16.8推出的方法,能够让函数式...
    99+
    2023-06-14
  • setState如何在react 中使用
    setState如何在react 中使用?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。setState是同步还是异步自定义合成事件和react钩子函数中异步更新state以...
    99+
    2023-06-14
  • 怎么在React中使用Hooks
    这篇文章给大家介绍怎么在React中使用Hooks,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、State Hook1、基础用法function State(){  const&nbs...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作