三步支持react项目less编译

因为React 官方提供的create-react-app,默认不支持less，需要手动集成。

1. 安装less 和 less-loader

需要下载less以及less-loader（ 切记： 因为less-loader版本过高无法兼容getOptions函数方法，所以需要降级，大部分文章表面不超过V5.0.0即可。）

npm install less less-loader@5.0.0 --save-dev

// 或者使用yarn
yarn add less less-loader@5.0.0 --dev

2. 暴露webpack配置文件

因为脚手架为了实现“零配置”，会默认把一些通用的脚本和配置集成到 react-scripts，目的是让我们专注于src目录下的开发工作，不再操心环境配置。同时，被其集成的脚本和配置也会从程序目录中消失 ，程序目录也会变得干净许多。

如果我们要自定义环境配置怎么办？

项目构建完成后，会提供一个命令yarn eject，通过这个命令，我们可以把被 react-scripts 集成的配置和脚本暴露出来。

首先在package.json的scripts里面添加eject命令：

"eject": "react-scripts eject"

然后执行命令

npm run eject

//或者使用yarn
yarn eject

如果失败的话，检查一下是否有没有提交的内容，全部提交,保证git status 无改动。

3. 在config/webpack.config.js文件里配置less-loader相关内容

共2处：

a. 配置正则

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

// 大概在66-67行添加less的正则，如下两行
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

b. 在oneof数组中添加less配置

可参考css和sass的写法，大概在472行

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

大功告成

在页面中引入试试叭

import styles from './index.less'

const CallCenter: React.FC<{}> = () => {
  return (
    <div className={styles.callCenterWrap}>
        callcenter
    </div>
  )
}