React17添加less支持

一、简介

react脚手架工具中只集成了css和sass，对于想用less的朋友来说不是很方便，需要自己手动配置。
这里就用一个新的项目记录一下自己手动添加less支持的过程。

二、操作步骤

2.1 新建一个react引用

按照官方文档的入门，新建一个react应用，并进入应用目录

# 新建应用my-app
npx create-react-app my-app

# 进入项目文件
cd my-app

# 安装依赖
npm i

2.2 解包react应用

使用命令将react应用进行解包，脚手架创建的应用默认是将很多底层内容给“隐藏”起来了的，要想获得更加自定义化的配置，需要将应用解包，触及到应用更核心的配置才行。

npm run eject

解包之后会发现项目多了很多新的文件夹，例如：

• config
• scripts
  ……

2.3 安装使用less的依赖项

使用less的依赖项主要包含两部分：

• less
• less-loader

npm i less less-loader@7.x --save-dev

[注意]
这里使用的是react@17.x，但是自带的webpack是4.x，安装的less-loader版本一定要是<8.x的，否则会报错，详见github上less-loader的release说明

2.4 修改webpack配置文件

webpack配置文件是解包之后多出来的config/webpack.config.js文件。
在该文件中，需要修改如下两部分内容:

2.4.1 添加less文件的正则表达式

搜索config/webpack.config.js文件，关键字sassModuleRegex，找到如下内容：

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

可以看到，这个是匹配css、sass的正则表达式。
在其后添加less文件的正则匹配规则：

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

2.4.2 添加less模块规则

搜索config/webpack.config.js文件，关键字sassModuleRegex，找到如下内容：

// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'sass-loader'
  ),
},

在其后添加内容：

// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'sass-loader'
  ),
},

// 添加的less模块规则
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 1,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 1,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      module: true,
      getLocalIdent: getCSSModuleLocalIdent
    },
    'less-loader'
  ),
},

保存文件

2.5 css -> less

直接将项目src文件夹下所有的css文件后缀名改为.less，运行命令npm run start启动应用，用浏览器打开本机的3000端口，发现样式丝毫没有改变，但是此时项目中的css文件已经换成了less文件，说明添加less支持成功了。

三、后记

如果运行npm run start显示报错，报错内容如下：

Failed to compile.

./src/index.less (./node_modules/_css-loader@4.3.0@css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_resolve-url-loader@3.1.3@resolve-url-loader??ref--5-oneOf-8-3!./node_modules/_less-loader@9.0.0@less-loader/dist/cjs.js??ref--5-oneOf-8-4!./src/index.less)
TypeError: this.getOptions is not a function

此时说明你的less-loader版本过高，因为less-loader@8.x版本就只支持webpack>=5，将less-loader的版本降低到7.x即可

四、参考资料

• TypeError: this.getOptions is not a function
• react 中使用less