Webpack-5 -阻止Webpack处理scss (或css)中图像的根相对路径。

Question

升级到Webpack-5之后，我得到了这个错误：

Error: Can't resolve '/path/to/image.jpg' in '/app/path/to/module/module'

问题是用于css背景的图像没有存储在存储库中，并且在构建时不可用。(为什么会这样，这是另一个时代的故事。)

这一问题：

在我的scss文件中：

background-image: url(/path/to/image.jpg);

在Webpack-4中，它保持原样，而且刚刚开始工作。

Webpack-5尝试处理该图像，但失败，出现上述错误.

这是行不通的：

在路径中添加引号..。

background-image: url("/path/to/image.jpg");

我试过Webpacks魔术评论..。

/* webpackIgnore: true */
background-image: url(/path/to/image.jpg)

..。但是它没有起作用(也许乳清被剥得太早了？--从我的创建-react app示例中的dev构建就可以看出这一点)。

webpack.IgnorePlugin

我还尝试了一些从这里的边缘案例提示。但我认为这太迟了，因为Webpack已经假定文件存在。

这起作用了但是..。

真正起作用的是，包括资产的绝对路径：

background-image: url(https://www.example.com/path/to/image.jpg);

但这就产生了它自己的一系列问题。

更新：

我在这个回购上转载了这个问题

Webpack魔术评说工作是为了发展建设，而不是为了生产建设。

~/webpack-test$ npm run build

> webpack-test@0.1.0 build
> node scripts/build.js

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve '/mypics/pom.jpg' in '/home/nodejs/webpack-test/src'

Answer 1

原来css-加载程序只有在options.url下才有配置选项！

感谢Webpack团队的亚历山大·阿克伊特回答我的问题这里。

它具有传递一个包含filter()谓词函数的对象的选项，该对象应该确定是否应该处理路径：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: {
            filter: (url, _resourcePath) => {
              // Disable processing for root-relative urls under /images
              return !/^\/images\//.test(url)

              // This would disable processing for all root-relative urls:
              // return !/^\//.test(url);
            },
          },
        },
      },
    ],
  },
};

下面是我用来解决问题中提到的回购中的这个问题的提交：https://github.com/dovidweisz/webpack-test/commit/a9e4cfc4ae0a5a8475ddd2cc114a8650846db421

您还可以通过简单地将传递给options.url来禁用false所有的url处理。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: false,
        },
      },
    ],
  },
};