starred/flag-icons

Fork 0

mirror of https://github.com/lipis/flag-icons.git synced 2026-04-26 17:35:54 +03:00

[GH-ISSUE #1298] @import scss file is not working in angular applications #592

New issue

Closed

opened 2026-03-03 14:39:36 +03:00 by kerem · 5 comments

kerem commented

2026-03-03 14:39:36 +03:00

Owner

Originally created by @LeLunZ on GitHub (Oct 28, 2024).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/1298

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.

Originally created by @LeLunZ on GitHub (Oct 28, 2024). Original GitHub issue: https://github.com/lipis/flag-icons/issues/1298 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`: ```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`.

kerem closed this issue

2026-03-03 14:39:36 +03:00

kerem commented

2026-03-03 14:39:37 +03:00

Author

Owner

@LeLunZ commented on GitHub (Nov 8, 2024):

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

@LeLunZ commented on GitHub (Nov 8, 2024): This is an issue in angular 17. I just upgraded to v18, and now it works.

kerem commented

2026-03-03 14:39:37 +03:00

Author

Owner

@EnzoBorgesPereira commented on GitHub (Jan 10, 2025):

Hi @LeLunZ, I have the same problem with angular 19, have you found a solution? (it works on v18, I'm updating my project)

@EnzoBorgesPereira commented on GitHub (Jan 10, 2025): Hi @LeLunZ, I have the same problem with angular 19, have you found a solution? (it works on v18, I'm updating my project)

kerem commented

2026-03-03 14:39:37 +03:00

Author

Owner

@LeLunZ commented on GitHub (Jan 10, 2025):

In my global styles scss I can currently do:

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

I don’t need anything else.

Before when I had the problem I could fix it by doing:

$flag-icons-path: 'node_modules/flag-icons/flags';

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

If one of these worked please let me know.

It could also be a problem with your angular builder. For me I still used the old webpack, and upgrading to esbuild helped a bit.

@LeLunZ commented on GitHub (Jan 10, 2025): In my global styles scss I can currently do: ``` @import 'node_modules/flag-icons/sass/flag-icons.scss'; ``` I don’t need anything else. Before when I had the problem I could fix it by doing: ``` $flag-icons-path: 'node_modules/flag-icons/flags'; @import 'node_modules/flag-icons/sass/flag-icons.scss'; ``` If one of these worked please let me know. It could also be a problem with your angular builder. For me I still used the old webpack, and upgrading to esbuild helped a bit.

kerem commented

2026-03-03 14:39:37 +03:00

Author

Owner

@EnzoBorgesPereira commented on GitHub (Jan 10, 2025):

I am still have the same issue, even after trying your solution. I suspect the problem might be related to Angular v19.

Here my SCSS file:

$flag-icons-included-countries: fr, es, pt, it, pl;

$flag-icons-path: "flag-icons/flags";

@import "flag-icons/sass/flag-icons";

And here are the CLI errors:

X [ERROR] Could not resolve "../../../../../../node_modules/.pnpm/flag-icons@7.2.3/node_modules/flag-icons/sass||file:node_modules/flag-icons/flags/1x1/fr.svg" [plugin angular-css-resource]

    lib/ui/shared/flag/flag.component.scss:25:24:
      25 │ ...mage: url("../../../../../../node_modules/.pnpm/flag-icons@7.2....
         ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Preprocessor stylesheets may not show the exact file location of the error.

@EnzoBorgesPereira commented on GitHub (Jan 10, 2025): I am still have the same issue, even after trying your solution. I suspect the problem might be related to Angular v19. Here my SCSS file: ``` $flag-icons-included-countries: fr, es, pt, it, pl; $flag-icons-path: "flag-icons/flags"; @import "flag-icons/sass/flag-icons"; ``` And here are the CLI errors: ``` X [ERROR] Could not resolve "../../../../../../node_modules/.pnpm/flag-icons@7.2.3/node_modules/flag-icons/sass||file:node_modules/flag-icons/flags/1x1/fr.svg" [plugin angular-css-resource] lib/ui/shared/flag/flag.component.scss:25:24: 25 │ ...mage: url("../../../../../../node_modules/.pnpm/flag-icons@7.2.... ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Preprocessor stylesheets may not show the exact file location of the error. ```

kerem commented

2026-03-03 14:39:37 +03:00

Author

Owner

@lipis commented on GitHub (Jan 16, 2025):

Can't do much for this issue.. sorry!

@lipis commented on GitHub (Jan 16, 2025): Can't do much for this issue.. sorry!

kerem referenced this issue

2026-03-03 14:41:12 +03:00

[PR #592] [MERGED] Bump husky from 3.0.3 to 3.0.4 #885