react中使用less

1. 安装less和less-loader

npm install less-loader less --save

2.修改webpack配置文件

找到webpack.config.js文件。
查找方法：A：通过全文搜索文件名。
                  B：react-project/config/webpack.config.js

如果找不到webpack.config.js，可以通过npm run eject将webpack配置文件暴漏出来，但是要注意：这个行为是不可逆的。

方法一：
①搜索cssRegex，修改为

const cssRegex = /\.(css|less)$/; //增加less
const cssModuleRegex = /\.module\.(css|less)$/;

方法二：
①搜索cssRegex，添加如下代码

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

②该页面中搜索oneof，进行最后的配置
（可以copy cssRegex或者sassRegex的配置）

{
    test: lessRegex,
    exclude: lessModuleRegex,
    use:getStyleLoaders(
        {    
           importLoaders:1,
　　　      moudles: true,              //模块化　　
           sourceMap: isEnvProduction && shouldUseSourceMap,
         },
         'less-loader'
    ),
    sideEffects:true,
},
{
  test: lessModuleRegex,
  use:getStyleLoaders(
        {
            importLoaders:1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            getLocalIdent:getCSSModuleLocalIdent,

          },
         'less-loader'
      )
}

需要注意一下：

lessRegex中importLoaders的值为1
当然这个是2也能使用，但是它的值是根据lessRegex变量后面正则中匹配的loader数来决定的，比如 const cssRegex = /.cssKaTeX parse error: Can't use function '\.' in math mode at position 44: …t sassRegex = /\̲.̲(scss|sass)/;对应的是scss和sass两种类型，那就应该是2.

essRegex的use中增加modules配置
modules可以不设置，不设置的话，less只能通过字符串名的方式使用，比如定义了一个 .title,引用时 import ‘./index.less’，使用时：className=“title”.
如果需要通过模块的方式调用，则需要把modules设置成true，就可以通过styles.title方式使用了。import styles from ‘./index.less’,使用className={styles.title}