Webpack4+配置less

最新推荐文章于 2021-08-29 21:02:50 发布

原创最新推荐文章于 2021-08-29 21:02:50 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #less

全民React 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在React结合AntD的项目中配置LESS预处理器，包括修改webpack配置、安装less-loader及具体代码添加步骤，使LESS文件能在项目中正确编译并应用。

开发React + AntD
想使用less如何配置

1.首先把webpack配置文件暴露出来

在这里插入图片描述
执行 yarn run eject

你的packge.json会大变样！！而且会多出config文件夹和script文件夹
栗子：
在这里插入图片描述

2.其次得确保你安装了less-loader！！

3.找到config/webpack.config.js文件，打开它：

找到这里：没错就是这里，（自行ctrl+c ctrl+v检索）

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

4.然后新增代码，对着写就行~

添加第一处，在上述代码块处添加：

// 添加如下代码
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.less$/;

此处添加完如图
在这里插入图片描述

添加第二处，检索test: sassModuleRegex，找到后如图
在这里插入图片描述

在此处下方添加：

// 添加如下代码
{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },