Question

我的角度应用最终以不同的虚拟路径部署到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内部的网址完全不变。

我使用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)加载吗？

UPD：无法使用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

如何强制CSS网址遵守webpack的publicPath设置？

1 个答案: