Cannot set $flag-icons-included-countries variable with @use

[kristofdho]

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.

[lipis]

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

[kristofdho]

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.