[GH-ISSUE #1335] Cannot set `$flag-icons-included-countries` variable with `@use` #602

New issue

Closed

opened 2026-03-03 14:39:40 +03:00 by kerem · 2 comments

kerem commented

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

Owner

Originally created by @kristofdho on GitHub (Feb 25, 2025).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/1335

Proper way to set the $flag-icons-included-countries variable with the @use sass directive instead of the @import directive is like this:

@use 'flag-icons/sass/flag-icons' with (
  $flag-icons-included-countries: 'us' 'de' 'fr' 'es'
);

However this fails with following error:

./src/app/example.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
This variable was not declared with !default in the @used module.
  ╷
5 │   $flag-icons-included-countries: 'us' 'de' 'fr' 'es'
  │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\app\example.component.scss 5:3  root stylesheet


error Command failed with exit code 1.

So for now we're stuck using it like this:

$flag-icons-included-countries: 'us' 'de' 'fr' 'es';
@import 'flag-icons/sass/flag-icons';

which achieves the desired result, but forces us to keep using @import.

In order to resolve the issue, $flag-icons-included-countries should be properly defined as a variable, just like e.g. $flag-icons-use-square.

Originally created by @kristofdho on GitHub (Feb 25, 2025). Original GitHub issue: https://github.com/lipis/flag-icons/issues/1335 Proper way to set the `$flag-icons-included-countries` variable with the `@use` sass directive instead of the `@import` directive is like this: ```scss @use 'flag-icons/sass/flag-icons' with ( $flag-icons-included-countries: 'us' 'de' 'fr' 'es' ); ``` However this fails with following error: ``` ./src/app/example.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): This variable was not declared with !default in the @used module. ╷ 5 │ $flag-icons-included-countries: 'us' 'de' 'fr' 'es' │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src\app\example.component.scss 5:3 root stylesheet error Command failed with exit code 1. ``` So for now we're stuck using it like this: ```scss $flag-icons-included-countries: 'us' 'de' 'fr' 'es'; @import 'flag-icons/sass/flag-icons'; ``` which achieves the desired result, but forces us to keep using `@import`. In order to resolve the issue, `$flag-icons-included-countries` should be properly defined as a variable, just like e.g. `$flag-icons-use-square`.

kerem closed this issue

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

kerem commented

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

Author

Owner

@lipis commented on GitHub (Feb 26, 2025):

We're working on it and there is an issue with @use and @imports (#1324)

@lipis commented on GitHub (Feb 26, 2025): We're working on it and there is an issue with @use and @imports (#1324)

kerem commented

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

Author

Owner

@kristofdho commented on GitHub (Feb 26, 2025):

Hi, thank you for the swift reply.
I found these PRs as well, but they do not add a proper variable declaration for $flag-icons-included-countries yet, which is why I created this issue.

@kristofdho commented on GitHub (Feb 26, 2025): Hi, thank you for the swift reply. I found these PRs as well, but they do not add a proper variable declaration for `$flag-icons-included-countries` yet, which is why I created this issue.

kerem referenced this issue

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

[PR #602] [MERGED] fix: Properly align 4x3 GB flag #892