Angular - Load from assets folder-CodePudding

My folder structure looks like

src
   styles.scss
   sass
      app.scss
      composants
          _icons.scss
   assets
      img
          icons
              alternative_medicine.svg

Inside my _icons.scss, I have the following

.icon-alternative_medicine {
     background: url(../../assets/img/icons/alternative_medicine.svg);
}

Inside my app.scss, I have the following

@import "composants/icons";

Inside my styles.scss, I have the following

@import  "./sass/app.scss";

I have the below erreur

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: xxxx\src\webapp\src\sass\composants\_icons.scss:25:20: Can't resolve '../../assets/img/icons/alternative_medicine.svg' in 'xxxx\src\webapp\src'

  24 |     .icon-alternative_medicine {
> 25 |         background: url(../../assets/img/icons/alternative_medicine.svg);
     |                    ^
  26 |     }

CodePudding user response：

Try using the absolute path. Something like /src/assets/img/icons/alternative_medicine.svg.

CodePudding user response：

Use the path that starts from /assets

    .icon-alternative_medicine {
        background: 
         url(/assets/img/icons/alternative_medicine.svg);
     }

Also I find something weird in your path. xxxx\src\webapp\src\sass\composants\_icons.scss Why do you have 2 src directories one inside each other?