FILEEM

POWER OF DREAM

修改webpack配置,在react中使用less

LESS是一个CSS预处理器,比如antD就是基于LESS的。
要在react中使用LESS,需要暴露webpack配置并进行修改,同时安装less和less-loader。

当然网上可以找到很多教程,关于如何修改的,但貌似webpack现在的最新版本,配置文件和以前不一样了,以前的教程照着做会很头大,我也是刚琢磨出来,把解决方法分享一下,当然,你看到的时候可能又过期了,不过值得一试。

首先,你需要安装LESS和LESS-LOADER:

yarn add less-loader less

然后暴露webpack配置:

yarn eject

在暴露出的配置中找到config\webpack.config.js并编辑。(这里就和我看的教程里不一样了,教程中是有webpack.config.dev.js和webpack.config.prod.js两个文件)

  1. 找到:
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

复制并粘贴,然后修改为:

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

《修改webpack配置,在react中使用less》
2. 找到:

 {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // 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: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },

复制并粘贴,然后修改为:

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },

《修改webpack配置,在react中使用less》
3. 找到:

 loader: require.resolve('postcss-loader'),

在其末尾后面添加:

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

《修改webpack配置,在react中使用less》

最后,重新yarn start项目,less文件就可以被读取了。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code