一、为什么要用 less

less 是 css 的预处理语言，好处是支持嵌套写法，让整个样式结构更易读吗，此外还支持变量、Mixin、函数等新特性，可以让我们写的样式代码更加的健壮，可复用性也更高。

二、如何配置 less

    npm i less --save-dev
然后再引入 less 的 loader
    npm install less less-loader --save-dev
这时候应该就能看到 package.json 的 devDependencies 了
**接着我们需要让 webpack 暴露出来，因为 React 默认把 webpack 文件隐藏起来了,我们需要先初始化并 git 到本地仓库一下，然后再执行 eject。PS：如果先做了这一步再引入 less 包的话，可以在引入包之后再执行一下这几步 git **
        git init
        git add .
        git commit -m ‘init'
        yarn eject
此时我们便可以看到 webpack 的 config 以及暴露出来了，里边包含了 webpack.config.js 这个文件
然后就可以在 webpack.config.js 内去配置 less 的全局变量以及 less-loader 加载器
对于 less 全局变量的配置，可以先搜索 sassModuleRegex，然后在它下面新增两行配置项
    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;
对于 less-loader 的配置，我们需要找到 getStyleLoaders 这个函数，然后在里边 require 一下 less 的 loader
接着我们搜索 oneOf ，然后再在这个数组内配置 less-loader
        test: lessRegex,
        exclude: lessModuleRegex,
        use: getStyleLoaders(
                importLoaders: 2,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
          'less-loader'
        sideEffects: true,
        test: lessModuleRegex,
        use: getStyleLoaders(
                importLoaders: 2,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
          'less-loader'
        sideEffects: true,
最后，对于使用 React TS 的同学，还需要再做个全局的 declare 配置，因为 TS 不能直接识别 less 文件。
    declare module '*.module.less' {
	const classes: { readonly [key: string]: string };
	export default classes;
declare module '*.less'
less
组件