在react项目中使用less

迷南。 2023-06-12 09:27 100阅读 0赞

# 在react项目中使用less #

1.  安装依赖包：cnpm i --save-dev less less-loader （less 、less-loader两个包）
2.  npm run eject 来暴露webpack的配置文件，你会发现多了config为名的文件夹。如果这步报错没关系，其实我们只需要在之前运行 git add . 命令，然后再运行 git commit -m “init” 命令就可以解决。
3.  修改webpack配置  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjczODg4_size_16_color_FFFFFF_t_70]  
    代码：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjczODg4_size_16_color_FFFFFF_t_70 1]  
代码：

{ 
                  test: lessRegex,
                  exclude: lessModuleRegex,
                  use: getStyleLoaders(
                    { 
                      importLoaders: 2,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                    },
                    'less-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: lessModuleRegex,
                  use: getStyleLoaders(
                    { 
                      importLoaders: 2,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                      modules: true,
                      getLocalIdent: getCSSModuleLocalIdent,
                    },
                    'less-loader'
                  ),
                },

1.  然后就可以正常使用了

参考：http://www.pianshen.com/article/3668378466/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjczODg4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191112093406957.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjczODg4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjczODg4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191112093548225.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjczODg4,size_16,color_FFFFFF,t_70