React支持less_react 支持less-优快云博客

本文链接：https://blog.youkuaiyun.com/yoonerloop/article/details/115361998

本文介绍了如何在Webpack配置中安装并使用less-loader处理Less文件，从添加loader到解决编译错误，包括CSS和LESS模块化支持。遇到问题时，给出了从less-loader 8.0.0回退到5.0.0的解决方案，以及CSS样式设置失效的排查技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'),
}