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 //這個版本比較穩(wěn)定



修改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



根目錄創(chuàng)建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的金豆之路

主要領域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路