如何强制 CSS url 尊重 webpack 的 publicPath 设置？

Question

我的 Angular 应用程序最终被部署到具有不同虚拟路径的 Web 服务器，例如：

http://website.com/app1/
http://website.com/app2/

为了让它们都能正常工作，在构建阶段我更改了 angular 的 <base href=> 和 webpack 的 publicUrl 选项以匹配特定的虚拟路径 app1 或 app2。

index.html 中的网址已正确更改为 <img src='hello.png'/> 到 <img src='app1/hello.png'/> 但是css和sass里面的url根本没有改变。

我使用style-loader、css-loader 和sass-loader 之类的插件：

        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
          include: [helpers.root('src', 'styles')],
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
          include: [helpers.root('src', 'styles')]
        }

假设我的 css 是：

body {
  background-image: url(bg.png);
}

我可以强制 webpack 将 publicUrl 添加到 bg.png 并从 url(app1/bg.png) 加载它吗？

更新： 没有办法使用 Angular CLI

Answer 1

这样的东西可以工作（未经测试）：

webpack.config.js

...

{
  loader: "sass-loader",
  options: {
    data: "$baseUrl: " + process.env.baseUrl + ";"
  }
}

...

scss：

body {
  background-image: url($baseUrl + 'bg.png');
}

这样你也可以在构建阶段更改process.env.baseUrl