React中引入less、less-loader

Love The Way You Lie 2022-12-27 14:05 320阅读 0赞

--------------------

# 前言 #

官方的 create-react-app创建的项目默认是不支持 less 的，但是又写不惯其他的预处理语言

# 方法 #

**第一步**

//安装 less与less-loader
    yarn add less less-loader --save-dev

**第二步**

//弹出默认配置，create-react-app创建的项目默认是没有webpack.config.js的
    yarn eject

![69f047a068e8d9df965a02d121694d68.png][]

**第三步**

// 在webpack.config.js文件中，仿sass的引入
    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;
    
    {
                  test: lessRegex,
                  exclude: lessModuleRegex,
                  use: getStyleLoaders(
                    {
                      importLoaders: 3,
                      sourceMap: isEnvProduction
                        ? shouldUseSourceMap
                        : isEnvDevelopment,
                    },
                    'less-loader'
                  ),
                  sideEffects: true,
                },
                {
                  test: lessModuleRegex,
                  use: getStyleLoaders(
                    {
                      importLoaders: 3,
                      sourceMap: isEnvProduction
                        ? shouldUseSourceMap
                        : isEnvDevelopment,
                      modules: {
                        getLocalIdent: getCSSModuleLocalIdent,
                      },
                    },
                    'less-loader'
                  ),
                }

![fa3557368d9985d819ab3627c5016b20.png][]  
![abaef61595c6752bb71fc7aecf948f3e.png][]

# 注意 #

TypeError: this.getOptions is not a function 错误

![image.png][]

这是由于less-loader版本过高导致，使用7.3.0版本即可。相关原因可以查看less-loder [Issues][]

对webpack不算熟悉，若有错，欢迎留言指导！

[69f047a068e8d9df965a02d121694d68.png]: /images/20221120/5759c6995dd642c180e0e90d86570c6c.png
[fa3557368d9985d819ab3627c5016b20.png]: /images/20221120/1b6e6348ef8845ee8dd930c071826cac.png
[abaef61595c6752bb71fc7aecf948f3e.png]: /images/20221120/8804ede5fde044199db2c04f5ccde5ff.png
[image.png]: /images/20221120/6a04bd99b4334f3199d2379d45b28eaf.png
[Issues]: https://github.com/rsuite/rsuite/issues/1566