@import scss file is not working in angular applications

[LeLunZ]

Importing the 'node_modules/flag-icons/sass/flag-icons.scss' in an scss file isn't working in newer angular applications with the esbuild bundler (which is now default).

When I do this in my styles.scss:

@import 'node_modules/flag-icons/sass/flag-icons.scss';

I get an error that the flag files can't be resolved:

✘ [ERROR] Could not resolve "../flags/4x3/de.svg" [plugin angular-css-resource]

    apps/............/src/styles.scss:1463:20:
      1463 │   background-image: url(../flags/4x3/hu.svg);
           ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~

Its possible to fix this by adding $flag-icons-path: 'node_modules/flag-icons/flags'; before the @import, but that wasn't needed in older webpack angular applications.

---

just to clarify, importing it in the config with styles: ["node_modules/flag-icons/sass/flag-icons.scss"] is working, but then its not possible to specify $flag-icons-included-countries.

[LeLunZ]

This is an issue in angular 17. I just upgraded to v18, and now it works.