1.找到cssRegex,用以下代码覆盖

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
2.找到变量名getStyleLoaders,修改里面的函数
 添加修改以下代码
 
const getStyleLoaders = (cssOptions, lessOptions,preProcessor) => {
    const loaders = [
        loader: require.resolve('less-loader'),
        options: lessOptions,
3.找到sassRegex关键词,在下面添加以下代码
 
  test: sassRegex,
   exclude: sassModuleRegex,
   use: getStyleLoaders(
       importLoaders: 3,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
     'sass-loader'
   // Don't consider CSS imports dead code even if the
   // containing package claims to have no side effects.
   // Remove this when webpack adds a warning or an error for this.
   // See https://github.com/webpack/webpack/issues/6571
   sideEffects: true,
 // Adds support for CSS Modules, but using SASS
 // using the extension .module.scss or .module.sass
   test: sassModuleRegex,
   use: getStyleLoaders(
       importLoaders: 3,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
       modules: {
         getLocalIdent: getCSSModuleLocalIdent,
     'sass-loader'
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
       importLoaders:1,
       sourceMap: isEnvProduction && shouldUseSourceMap,
     'less-loader'
   sideEffects: true,
   test: lessModuleRegex,
   use: getStyleLoaders(
       importLoaders:1,
       sourceMap: isEnvProduction && shouldUseSourceMap,
       modules: {
         getLocalIdent: getCSSModuleLocalIdent,
     'less-loader'
npm run start
 
这里特别注意安装的less-loader是5.0.0
 npm install less-loader@5.0.0
 
                                    本来只是想实现一个less的模块化功能，网上查到很多方法说要react-scripts eject！想着我也没折腾过webpack.config.js也就试试，结果……
加完以后发现，单纯引用less可以，但是模块化不行？！又找了半天，发现之前的“攻略”里缺了个modules: true,。加完后确实可以模块化引import styles from './index.less';，但是原本的全局配置类又失效了！加上对eject出来一堆完全用不到的东西越看越不顺眼，干脆推倒重来。本来我......
上一篇中，css和less要做模块化，
样式文件名必须写成xx.module.css或者xx.module.less的形式。
这在实际开发中，仍然不够友好，毕竟样式文件名中要一直加上.module这个后缀。
本篇中就来解决这个问题。
在webpack.config.js配置文件中找到这样的代码：
                                    Less知识点整理（一）
1.什么是Less
它不是全新的一门语言，是一款CSS预编译器，仍然使用CSS原有语法进行选择器的编辑，但融入了编程语言的逻辑特征，会生成易于管理、便于维护的CSS代码，也可以理解为是一个CSS框架。
CSS代码量会变少
CSS管理更加方便
学习成本低
使用数值类型与颜色类型的值更为容易
完全兼容CSS3
内置函数特征
@color:orange;
@mywidth:300px;
.circule(){
  border-radius:50%;
.midd
                                    文章目录1 customize-cra  react-app-rewired1.1 安装less less-loader customize-cra  react-app-rewired1.2 修改package.json1.3 根目录下新建config-overrides.js2 eject2.1 暴露配置文件2.2 更改webpack.config.js2.2.12.2.23 使用
react项目自带css module作为解决方案应对全局样式污染、命名混乱等问题。原理是为每个类生成一个唯一的类名。
import bootobj from 'bootstrap/dist/css/bootstrap.css'
由于该包被安装到了node_modules目录下，因此可以省略该目录，直接以包名引入自己的模块或样式表