react项目进行less配置

谁践踏了优雅 2023-01-13 04:07 181阅读 0赞

# 前言： #

由于 create-react-app 脚手架中并没有配置关于 less 文件的解析，所以我们需要自己进行配置。需要安装插件 less less-loader。

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

# 安装步骤： #

1.  create-react-app file\_name创建新项目或打开已创建的项目
2.  安装less

npm install less less-loader --save

3.拉取react的配置文件

npm run eject

4.在webpack.config.js文件中找到 css和sass配置项,在其之后加上，并模仿sass的写一份less的配置

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'
                  ),
                },

![在这里插入图片描述][20210415163716533.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70]  
5.正常到这里，只要重新运行项目即可

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

# 可能出现的问题： #

1.npm run eject拉取配置文件时出错

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 1]  
原因：如文件被修改，无法运行，可能是.git文件的存在问题。  
解决方案：到文件目录下，删除.git文件即可

1.  安装完成重新运行出错  
    ![在这里插入图片描述][20210415164628631.png]  
    原因： less-loader安装的版本过高  
    解决方案：

1.npm uninstall less-loader
    2.npm install less-loader@5.0.0

[20210415163716533.png]: /images/20221022/14ada1a9119a42839c8f6506e02e20b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70]: /images/20221022/9e408a1f6e0047e3b4bb740779f75bff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/8be42fdb36e14888a7eb0b72bd8a8609.png
[20210415164628631.png]: /images/20221022/63b06b4fa9a246a19cb67cde54c17704.png