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

Posted 2023-03-06

【中文标题】如何强制 CSS url 尊重 webpack 的 publicPath 设置？

【英文标题】：How to force CSS urls to respect webpack's publicPath setting?

【发布时间】：2019-06-08 01:15:36

【问题描述】：

我的 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

【问题讨论】：

Can Angular CLI pass environment-specific settings to Sass variables?的可能重复

@jcal 不是真的，我根本不能使用角度 CLI。我已经更新了问题

看看https://webpack.js.org/loaders/sass-loader/#environment-variables

【参考方案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 没有帮助

是什么阻碍了您将其更改为 scss？

@d.dizhevsky https://github.com/csstools/postcss-preset-env