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

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#less #react.js #node.js

本文介绍了如何在新版create-react-app中配置Less环境。首先需要安装Less，然后找到并编辑`node_modules/react-scripts/config/webpack.config.js`。由于默认配置已包含Sass环境，我们需要新增Less的配置。然而，直接安装的less-loader可能导致TypeError。解决这个问题的方法是将less-loader降级到6.0.0版本，通过运行`npm install less-loader@6.0.0`来实现。

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

当前的less和less-loader配置会导致报错

node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/page/test/redux-page.less)
TypeError: this.getOptions is not a function

百度上搜索

create-react-app 配置 less TypeError: this.getOptions is not a function

原因：这个实际上就是 less-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理
解决方法：通过 npm install less-loader@6.0.0 命令下载降级版本的 less-loader