React17添加less支持

逃离我推掉我的手 2022-10-05 07:49 202阅读 0赞

### 目录 ###

*  一、简介
 *  二、操作步骤
 *   *  2.1 新建一个react引用
     *  2.2 解包react应用
     *  2.3 安装使用less的依赖项
     *  2.4 修改webpack配置文件
     *   *  2.4.1 添加less文件的正则表达式
         *  2.4.2 添加less模块规则
     *  2.5 css -> 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说明**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZkMjE0MzMzODkw_size_16_color_FFFFFF_t_70]

## 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'
      ),
    },
    
    // 添加的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][TypeError_ this.getOptions is not a function]
 *  [react 中使用less][react _less]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZkMjE0MzMzODkw_size_16_color_FFFFFF_t_70]: /images/20221005/1d7f700fcb104e459caebd791997471e.png
[TypeError_ this.getOptions is not a function]: https://github.com/webpack-contrib/less-loader/issues/416
[react _less]: https://blog.csdn.net/weixin_38404899/article/details/104372746