ng build --base-href="/.../" --deploy-url="/.../" css 背景图片不起作用

par*_*hah 4 angular-cli angular scss-mixins angular8

"@angular/core": "~8.0.0",

带有 scss 样式选项的脚手架 angular 8 项目

我在组件 scss 文件中有如下所述的代码

背景: url("/assets/images/vector-icon.png") 不重复 25%;

在最终构建时使用命令

ng build --prod --base-href="/website/" --deploy-url="/website/"
Run Code Online (Sandbox Code Playgroud)

将 build 放在子文件夹 root/webside

除了背景图像路径外,一切正常

我已经尝试过 ip/website/assets/images/vector-icon.png 那时我能够获得图像。

如果我不想更改每个 css 文件的路径怎么办。

任何帮助,将不胜感激。提前致谢

小智 12

解决方案是将 "rebaseRootRelativeCssUrls": true 放在 angular.json 文件中。

资产之前的 / 是正确的。( url(/assets/img...) )

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
           ...
           "rebaseRootRelativeCssUrls": true

Run Code Online (Sandbox Code Playgroud)

  • rebaseRootRelativeCssUrls 已弃用,并将在下一个主要版本中删除。参考:https://angular.io/cli/build (3认同)
  • @curiousBoy 什么会取代它?由于需要此功能,因此如果没有此变基,应用程序根本无法运行 (3认同)

Don*_*ato 6

不要/在资产之前使用

background: url("assets/images/vector-icon.png") no-repeat 25%;
Run Code Online (Sandbox Code Playgroud)

附言。并且该assets/images文件夹必须包含此图像。

聚苯硫醚。确保该路径正确。