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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM