search

lipis / flag-icons

:flags: A curated collection of all country flags in SVG — plus the CSS for easier integration
https://flagicons.lipis.dev
MIT License
10.75k stars 1.86k forks source link

@import scss file is not working in angular applications #1298

Open LeLunZ opened 2 weeks ago

LeLunZ commented 2 weeks ago

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 commented 1 week ago

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