React支持less

1、安装less-loader

yarn add less-loader

2、暴露配置信息

yarn ejcet

3、找打config/webpack.config.js

4、添加lessRegex和lessModuleRegex

// 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$/

5、添加less-loader支持

 {
    loader: require.resolve('less-loader'),
    options: lessOptions,
 },

6、将cssRegex的配置复制一份，放在cssRegex后面

{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
    }, 'less-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 (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
    test: lessModuleRegex,
    use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        modules: {
            getLocalIdent: getCSSModuleLocalIdent,
        },
    }, 'less-loader'),
}

7、遇到的问题

（1）编译出错

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema

将less-loader@8.0.0变为less-loader@5.0.0

（2）css、less设置不生效

需要在父类的div节点上设置，在组件上设置不生效。