你如何强制 Webpack 在构建过程中忽略 URL 解析中的错误？

Question

我的目录结构如下：

example/
├── css/
│     ├── styles.css
├── img/
│     ├── background.jpg
└── src/
    ├── scss/
    │   ├── app.scss
    └── app.js

当我为 app.scss 中的背景图像指定绝对值 URL 时，例如 background-image: url("/img/background.jpg");，它将正常工作。

但是，如果我指定一个相对 URL，例如 background-image: url("../img/background.jpg");，构建过程将失败。

有没有办法强制 Webpack 忽略此类错误？

如果它只是继续构建我的 styles.css 文件，它当然会通过相对 URL 正确加载背景，但我永远做不到那么远。

解决这个问题很重要，否则您将被迫将网站部署到 webroot 中，并且不能使用子目录，因为绝对 URL 会在生产环境中中断。

感谢您的帮助。

Answer 1

在 webpack 中忽略文件解析错误是没有意义的，我认为没有办法做到这一点。

但是从你的应用结构来看，相对路径应该../../img/background.jpg

更新：

抱歉一开始弄错了，我用 sass 和 sass-loader 重现了你的问题，结果证明这是一个常见问题，并且有一个 section在 sass-loader 中，他们提到了 2 个解决方案：

Add the missing url rewriting using the resolve-url-loader. Place it before the sass-loader in the loader chain.

Library authors usually provide a variable to modify the asset path. bootstrap-sass for example has an $icon-font-path

你如何强制 Webpack 在构建过程中忽略 URL 解析中的错误？

How do you force Webpack to ignore errors in URL resolution in the build process?

webpack

webpack-style-loader

extract-text-plugin