Webpack 屏蔽不需要引入的 Less 文件

由于一些原因，我不想引入 antd 的 less 文件，但是我引入一个外部 npm 组件的时候，这个组件调用了 antd 的 less 文件，会覆盖我司项目中的样式

解决方法

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              additionalData: async (content, loaderContext) => {
                // More information about available properties https://webpack.js.org/api/loaders/
                const { resourcePath, rootContext } = loaderContext;

                const relativePath = path.relative(rootContext, resourcePath);

                // 如果遇见 antd 的 less 文件，则返回空
                if (/antd.*\.less$/.test(relativePath)) {
                  return '';
                }

                // 如果不是，则正常返回
                return content;
              },
            },
          },
        ],
      },
    ],
  },
};

解决过程及思路

我先是用下面的 webpack 配置进行了过滤排除，得到了一堆报错。

let a = {
  test: /\.less$/,
  exclude: /antd*\.less$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
          strictMath: false,
        },
      },
    },
  ],
};

其中关键部分是这一块，我想排除 antd 文件夹中的 less 文件，但是最后编译得到了一堆报错，至于为什么就不得而知了。

test: /\.less$/,
exclude: /antd.*\.less$/,
use: // something with css modules

然后我在群里问了一下，群友说用 !important，css 权重提升啊这些，很明显我没有很好的表达清楚我的意图，还好有个在德国的巨佬听明白我的意思，并且一下子描述出我的处境了。

最后我干脆说我想屏蔽 node_modules 中的 antd 依赖里的 less 文件，不编译到项目里面。

暴力替换资源

德巨（德国巨佬的简称）可爱的 kiochan 表示可以用资源替换法暴力替换匹配到的 less 资源，改成空。

参见 NormalModuleReplacementPlugin

使用 less-loader 自带的方法处理

后来我翻了一下 less-loader 的文档，无意中看到了这个方法。

参见 additionaldata

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              additionalData: (content, loaderContext) => {
                // 更多可用的属性见 https://webpack.js.org/api/loaders/
                const { resourcePath, rootContext } = loaderContext;
                const relativePath = path.relative(rootContext, resourcePath);

                if (relativePath === 'styles/foo.less') {
                  return '@value: 100px;' + content;
                }

                return '@value: 200px;' + content;
              },
            },
          },
        ],
      },
    ],
  },
};

后记