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？

- Snowman

---

你的webpack配置是什么？你是否为文件/此类文件设置了基本路径？ - ssube

@ssube 关于图片，我有以下代码：{ test: /.png$/, loader: 'file-loader?name=/images/[name].[ext]' } - Snowman

Answer 1

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

我找到了另一种解决方法。使用resolve-url-loader，并设置webpack.config.js来使用它：

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

现在，相对路径将根据包含url(...)语句的原始文件正确解析。

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

- Snowman

Answer 2

这可以在 CSS 加载器中进行配置：

https://github.com/webpack/css-loader#root-relative-urls

"

对于以 / 开头的 URL，默认行为是不进行翻译：

因此，我假设您想要翻译以 / 开头的 URL。您可以向 CSS 加载器添加一个根参数。

"

- Young Zhao