React项目中 使用 CSS Module
安装react-app-rewired
由于新的 react-app-rewired@2.x 版本的关系,还需要安装 customize-cra。但是我们这里不需要安装 react-app-rewired@2.x。只需要安装 react-app-rewired@2.0.2-next.0这个版本就可以了。
yarn add react-app-rewired@2.0.2-next.0 --save-dev //这个版本比较稳定
修改package.json
/* package.json */
“scripts”: {
“start”: “react-app-rewired start”,
“build”: “react-app-rewired build”,
“test”: “react-app-rewired test --env=jsdom”,
}
安装css-modules包
//scss版本
yarn add --dev react-app-rewire-css-modules sass-loader sass
//less版本
yarn add --dev react-app-rewire-less-modules
根目录创建config-overrides.js并编辑以下代码
/*config-overrides.js */
const { injectBabelPlugin } = require(‘react-app-rewired’);
const rewireCssModules = require(‘react-app-rewire-css-modules’);
module.exports = function override(config, env) {
//css模块化
config = rewireCssModules(config, env);
return config;
};
css文件后缀需要加上特殊写法
*.module.css
*.module.less
*.module.scss
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119882477
React项目中 使用 CSS Module的更多相关文章
- 了解CSS in JS(JSS)以及在React项目中配置并使用JSS
目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
- 深入浅出TypeScript(5)- 在React项目中使用TypeScript
前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...
- React项目 - 几种CSS实践
前言团队在使用react时,不断探索,使用了很多不同的css实现方式,此篇blog总结了,react项目中常见的几种css解决方案:inline-style/radium/style-componen ...
- React项目中使用less/scss&全局样式/变量
使用create-react-app脚手架搭建初始化项目 > npm install -g create-react-app > npx create-react-app my-app c ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...
随机推荐
- vim 下几种比较省劲的方式(vi结合着用)
Vim的几种模式 正常模式:可以使用快捷键命令,或按:输入命令行. 插入模式:可以输入文本,在正常模式下,按i.a.o等都可以进入插入模式. 可视模式:正常模式下按v可以进入可视模式, 在可视模式下, ...
- Leetcode216/39/40/77之回溯解决经典组合问题
Leetcode216-组合总和三 找出所有相加之和为 n 的 k 个数的组合,且满足下列条件: 只使用数字1到9 每个数字 最多使用一次 返回 所有可能的有效组合的列表 .该列表不能包含相同的组合两 ...
- DRF JWT认证(一)
为什么要使用JWT认证?构成和原理又是什么?怎么还有Base64的事?我都写了
- JS/TS项目里的Module都是什么?
摘要:在日常进行JS/TS项目开发的时候,经常会遇到require某个依赖和module.exports来定义某个函数的情况.就很好奇Modules都代表什么和有什么作用呢. 本文分享自华为云社区&l ...
- 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍
今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...
- 音视频基本概念和FFmpeg的简单入门
写在前面 最近正好有音视频编辑的需求,虽然之前粗略的了解过FFmpeg不过肯定是不够用的,借此重新学习下: 基本概念 容器/文件(Conainer/File): 即特定格式的多媒体文件,一般来说一个视 ...
- python学习-Day7
目录 作业讲解 数据类型内置方法2 字符串(str) 列表(list) 类型转换 内置方法 索引取值 切片操作 步长 统计列表中元素的个数 成员运算 (in和not in) 列表添加元素的方式* 删除 ...
- C# 一维数组如何快速实现数组元素的数据类型的转换?
一.场景假设 假设有一串字符串如下所示,字符串中的数字之间已用英文状态下的逗号隔开.要求用此字符串中的数字快速生成int类型的数组,且尽可能使用最少的代码量. string str = "1 ...
- 100ms的SQL把服务器搞崩溃了
前言 一个项目上线了两个月,除了一些反馈的优化和小Bug之外,项目一切顺利:前期是属于推广阶段,可能使用人员没那么多,当然对于项目部署肯定提前想到并发量了,所以早就把集群安排上,而且还在测试环境搞了一 ...
- SpringData JPA接口总结
1 JPA 1.1 整体概念 JPA:Java Persistence API,就是java持久化api,是SUN公司推出的一套基于ORM的规范. ORM呢:Object-Relational Map ...