React支持less

最新推荐文章于 2024-04-19 11:23:43 发布

原创最新推荐文章于 2024-04-19 11:23:43 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less

react 专栏收录该内容

26 篇文章

订阅专栏

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

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