Question

我的$scope文件位于scss。

我还在src/app/views/style.scss中有一个图片文件。

我想做这样的事情：（注意绝对路径）

src/app/images/icon.png

但是，这显然不起作用，因为我需要使用相对路径转到父目录。

这可行（相对路径），但不可取：

background-image: url("/images/icon.png");

如何配置Webpack以尊重嵌套文件中的绝对URL？

Answer 1

我遇到的问题是，当将一个scss文件导入另一个不必在同一目录中的scss文件时，我会遇到问题。所以我认为使用绝对URL可以解决这个问题。

我能够找到解决此问题的不同方法。使用resolve-url-loader，并设置webpack.config.js来使用它：

{
        test: /\.scss$/,
        loaders: ["style", "css", 'resolve-url', "sass?sourceMap"]
}

现在可以根据url(...)语句所在的原始文件正确解析相对路径。

然而，我仍然会对使用绝对路径的问题的解决方案感兴趣。

Answer 2

这可以在css loader中配置：

＆＃34;对于以/开头的网址，默认行为是不翻译它们：＆＃34;

所以我假设你要翻译urls以/开头。您可以将根参数添加到css加载程序。