0

i have a folder filled with svg's (path: src/assets/icons). The css function url() is implemented like this:

url("/assets/icons/CheckSmall.svg");

It finds the svg data, when I run ng serve. But when I build my Project, it cant find the svg data. Although it exists in the folder dist/myApp/assets/icons/CheckSmall.svg

I have read through many forums and discussions and tested a few things (One of many discussions).

For example i used different pathing "strategies":

 1. url("^assets/icons/CheckSmall.svg")
 2. url("~/assets/icons/CheckSmall.svg")

For number (1) it seems like it is not a supported feature in Angular, thats why i dont want to use it. And for (2) it copies my Assets and puts them into the folder dist/myApp.

Is there a viable(supported or documented) alternative? Or can I somehow adjust the angular.json.

enter image description here

DeeKazing
  • 13
  • 5

1 Answers1

0

Try using the following syntax:

background-image: url('../../assets/icons/<file-name>')

Where the route is relative to the css file

If you're setting non-default baseHref or deployUrl flags as part of the build that can also affect it

Try using that approach in styles.scss or in the relevant component, without the scss variable. The relative path won't be correct when the scss variable is used in different folders

Drenai
  • 11,315
  • 9
  • 48
  • 82
  • Does not work for me... ./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleError: Module Error (from ./node_modules/postcss-loader/dist/cjs.js): C:\Users\USER\Desktop\PROJECTNAME\node_modules\bootstrap\scss\forms\_form-check.scss:58:8: Can't resolve '../node_modules/bootstrap/assets/icons/CheckSmall_currentColor.svg' in 'C:\Users\USER\Desktop\PROJECTNAME\src' at Object.emitError (C:\Users\USER\Desktop\PROJECTNAME\node_modules\webpack\lib\NormalModule.js:562:6) ... – DeeKazing Feb 13 '22 at 10:14
  • How is bootstrap factoring into that error? `node_modules/bootstrap/assets/`. The relative path I used was just an example, in case you used it directly – Drenai Feb 13 '22 at 10:34
  • Its probably from my styling for Bootstrap. Maybe the Screenshot i added helps more. – DeeKazing Feb 13 '22 at 14:46