sass - Webpack - 从绝对路径导入

Question

我有一个 scss文件位于 src/app/views/style.scss .

我在 src/app/images/icon.png 中也有一个图像文件.

我想做这样的事情: (注意绝对路径)

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

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

这有效(相对路径)，但不可取:

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

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

Answer 1

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

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

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

现在可以根据原始文件正确解析相对路径 url(...)声明在。

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