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

1/* package.json */
2"scripts": {
3   "start": "react-app-rewired start",
4   "build": "react-app-rewired build",
5   "test": "react-app-rewired test --env=jsdom",
6}

安装css-modules包

1//scss版本
2yarn add --dev react-app-rewire-css-modules sass-loader sass 
3//less版本
4yarn add --dev react-app-rewire-less-modules

根目录创建config-overrides.js并编辑以下代码

1/*config-overrides.js */
2const { injectBabelPlugin } = require('react-app-rewired');
3const rewireCssModules = require('react-app-rewire-css-modules');
4
5module.exports = function override(config, env) {
6    //css模块化
7    config = rewireCssModules(config, env);
8    return config;
9};

css文件后缀需要加上特殊写法

1*.module.css
2*.module.less
3*.module.scss

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

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

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/GtZAeGV6Hvfga4DJi9q4HA，如有侵权，请联系删除。