其他分享
首页 > 其他分享> > React项目中 使用 CSS Module

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

 

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119882477

标签:react,module,app,Module,React,css,config,CSS,rewired
来源: https://www.cnblogs.com/wangchuanxinshi/p/16381050.html