Angular配置base-href后SCSS中url引用图片路径失效如何解决？

配置调整步骤 #

1. 修改angular.json配置 #

打开项目根目录的angular.json文件，按如下规则修改：

• 先在 projects > 你的项目名 > architect > build > options 下添加样式预处理路径配置，避免写多层相对路径：

"stylePreprocessorOptions": {
  "includePaths": [
    "src/assets"
  ]
}

• 再在 projects > 你的项目名 > architect > build > configurations > production 下添加deployUrl配置，和你的部署子路径保持一致：

"production": {
  "deployUrl": "/magazine/",
  // 保留原有production配置项即可
}

2. 调整SCSS图片引用写法 #

所有SCSS文件中的图片引用直接写成如下格式即可，不需要加前缀、不需要写相对路径：

background-image: url('images/你的图片名.jpg');

3. 保留原有构建命令 #

构建命令不需要修改，仍使用：

ng build --prod --base-href=/magazine/

原问题原因说明 #

• 直接写./assets/路径时，SCSS编译时会相对当前样式文件路径寻址，找不到资源就会被当做根路径绝对路径处理，因此会忽略子路径前缀直接请求根域名下的assets目录。
• 写多层相对路径时，webpack会将图片当做独立模块哈希打包，输出到dist根目录，不会走assets静态资源托管逻辑。
• ~前缀的路径写法在Angular 11的SCSS处理逻辑中存在兼容问题，因此会抛出对应报错。

内容的提问来源于stack exchange，提问作者Cas