React项目中 使用 CSS Module

阳光穿透心脏的1/2处 2021-08-30 22:48 458阅读 0赞

安装react-app-rewired

由于新的 react-app-rewired@2.x 版本的关系，还需要安装 customize-cra。但是我们这里不需要安装 react-app-rewired@2.x。只需要安装 react-app-rewired@2.0.2-next.0这个版本就可以了。

  1. 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版本
  2. yarn add --dev react-app-rewire-css-modules sass-loader sass 
  3. //less版本
  4. yarn add --dev react-app-rewire-less-modules

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

  1. /*config-overrides.js */
  2. const {  injectBabelPlugin } = require('react-app-rewired');
  3. const rewireCssModules = require('react-app-rewire-css-modules');
  5. module.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

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

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，458人围观）

还没有评论，来说两句吧...

相关阅读

    相关 react-css-modules

    在开发 react 项目中，有些项目需要设置大量的样式文件，如果通过定义样式常量，纯嵌入的方式编写样式，这将会大大的降低效率。stylus + react-css-module

    蔚落蔚落/ 0 赞/ 245 阅读