【react+ts】react配置使用less

发布时间:2022-01-09沉默小管-技术博客【react+ts】react配置使用less 1191 2

原文地址: https://www.php-china.com//detail/87

# 问题原因
**react+ts项目中找不到login.less模块**,没有配置查找less和css后缀，项目默认找node_modules里的模块，所以我们需要在配置项中添加less和css
```javascript
import style from "./login.less"
```
 
# 解决流程

## 1.暴露react配置文件
在项目根目录运行npm run eject暴露react配置文件
```bash
npm run eject
```
如果有报错请查看我另外一篇文章
[运行npm run eject报错解决办法](https://blog.csdn.net/qq_36977923/article/details/122130882?spm=1001.2014.3001.5501)

## 2.修改配置文件
1.找到cssRegex,用以下代码覆盖
```javascript
const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
```
2.找到变量名**getStyleLoaders**,修改里面的函数
添加修改以下代码
```javascript
const getStyleLoaders = (cssOptions, lessOptions,preProcessor) => {
    const loaders = [
      ...
      {
        loader: require.resolve('less-loader'),
        options: lessOptions,
      },
      ...
    ]
  }
```

3.找到**sassRegex**关键词,在下面添加以下代码

```javascript
{
  test: sassRegex,
   exclude: sassModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 3,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
     },
     'sass-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: sassModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 3,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
       modules: {
         getLocalIdent: getCSSModuleLocalIdent,
       },
     },
     'sass-loader'
   ),
 },
 {
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders:1,
       sourceMap: isEnvProduction && shouldUseSourceMap,
     },
     'less-loader'
   ),
   sideEffects: true,
 },
 {
   test: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders:1,
       sourceMap: isEnvProduction && shouldUseSourceMap,
       modules: {
         getLocalIdent: getCSSModuleLocalIdent,
       },
     },
     'less-loader'
   ),
 },
```
**重启项目**
```bash
npm run start
```

> 这里特别注意安装的less-loader是5.0.0
> npm install less-loader@5.0.0