新版 create-react-app 添加less环境配置

最新推荐文章于 2023-09-26 12:19:35 发布

原创最新推荐文章于 2023-09-26 12:19:35 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在React项目中安装并配置Less环境，包括必要的依赖包安装步骤，以及在webpack.config.js中添加Less相关配置的方法，确保项目能正确解析和使用Less文件。

1. 安装less

npm install less-loader less --save-dev

2. 查找 node_modules 下面的react-scripts/config/webpack.config.js

默认已经帮你配置了sass环境 (只要安装sass环境 npm install sass-loader node-sass --save-dev)

我们只要新增

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


在上面的sass那边copy一份，配置成为less


  {
              test: lessRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },