安装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的更多相关文章

  1. 了解CSS in JS(JSS)以及在React项目中配置并使用JSS

    目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...

  2. react项目中实现元素的拖动和缩放实例

    在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...

  3. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

  4. 深入浅出TypeScript(5)- 在React项目中使用TypeScript

    前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...

  5. React项目 - 几种CSS实践

    前言团队在使用react时,不断探索,使用了很多不同的css实现方式,此篇blog总结了,react项目中常见的几种css解决方案:inline-style/radium/style-componen ...

  6. React项目中使用less/scss&全局样式/变量

    使用create-react-app脚手架搭建初始化项目 > npm install -g create-react-app > npx create-react-app my-app c ...

  7. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  8. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  9. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

随机推荐

  1. oracle三个重要参数文件:pfile和spfile和init.ora

    Oracle中的参数文件是一个包含一系列参数以及参数对应值的操作系统文件.它们是在数据库实例启动第一个阶段时候加载的, 决定了数据库的物理 结构.内存.数据库的限制及系统大量的默认值.数据库的各种物理 ...

  2. 基于kubernetes的分布式限流

    做为一个数据上报系统,随着接入量越来越大,由于 API 接口无法控制调用方的行为,因此当遇到瞬时请求量激增时,会导致接口占用过多服务器资源,使得其他请求响应速度降低或是超时,更有甚者可能导致服务器宕机 ...

  3. RecyclerView + SQLite 简易备忘录-----中(1)

    在上一节讲完了登录界面的内容,现在随着Activity的跳转,来到MainActivity. 1.主界面activity_main.xml 由上图,activity_main.xml的内容很简单. 首 ...

  4. 简单说一说jsonp原理

    背景:由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案. 同源策略即:同一协议,同一域名,同一端口号.当其中一个不满足时,我们的请求即会 ...

  5. 最新MATLAB R2021b超详细安装教程(附完整安装文件)

    摘要:本文详细介绍Matlab R2021b的安装步骤,为方便安装这里提供了完整安装文件的百度网盘下载链接供大家使用.从文件下载到证书安装本文都给出了每个步骤的截图,按照图示进行即可轻松完成安装使用. ...

  6. 3.1 常用Linux命令

    1.echo命令 echo命令用于在终端设备上输出字符串或变量提取后的值,语法格式为"echo [字符串] [$变量]". 2.date命令 date命令用于显示或设置系统的时间与 ...

  7. 使用Proftpd支持FTP/SFTP权限管控

    简介 FTP 文件传输协议,FTP由FTP服务器(存储文件)和FTP客户端(通过FTP协议访问FTP服务器上的资源)组成 传输方式 主动模式(Port) 客户端与服务器端的TCP 21端口建立连接 - ...

  8. lab_1 清华大学ucore bootload启动ucore os(预备基础知识+实验过程)

    实验1 :bootload启动ucore os 1.0实验内容: lab1中包含一个bootloader和一个OS.这个bootloader可以切换到X86保护模式,能够读磁盘并加载ELF执行文件格式 ...

  9. EdgeFormer: 向视觉 Transformer 学习,构建一个比 MobileViT 更好更快的卷积网络

    ​  前言 本文主要探究了轻量模型的设计.通过使用 Vision Transformer 的优势来改进卷积网络,从而获得更好的性能. 欢迎关注公众号CV技术指南,专注于计算机视觉的技术总结.最新技术跟 ...

  10. .NET Core 企业微信消息推送

    接口定义 应用支持推送文本.图片.视频.文件.图文等类型.请求方式:POST(HTTPS)请求地址: https://qyapi.weixin.qq.com/cgi-bin/message/send? ...