React项目中 使用 CSS Module
发布日期:2021-07-01 02:18:59 浏览次数:2 分类:技术文章

本文共 945 字,大约阅读时间需要 3 分钟。

安装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

作者:Vam的金豆之路

主要领域:前端开发

我的微信:maomin9761

微信公众号:前端历劫之路


转载地址:https://maomin.blog.csdn.net/article/details/107005678 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:(win环境)使用Electron打造一个桌面应用翻译小工具
下一篇:react native 0.6x 在创建项目时,CocoaPods 的依赖安装步骤卡解决方案

发表评论

最新留言

感谢大佬
[***.8.128.20]2024年04月21日 15时14分19秒