Issues when using @use

[HowdyMcGee]

I've also created SO question with a bit more detail.

I'm learning a bunch of new things and one of those things happen to be Sass! In my Sass project ( which is also a Laravel project ) I want to use Font Awesome throughout. The problem I'm running into is that the NPM library uses @import but the Sass documentation discourages the use of @import and instead suggests directives like @use and @forward as alternatives. This is fine I guess but I keep running into issues trying to use Font Awesome and also the Sass suggested practices.

For example, the following doesn't seem to work:

@use "~@fortawesome/fontawesome-free/scss/fontawesome.scss" as *;
@use "~@fortawesome/fontawesome-free/scss/solid.scss" as *;

.add-new {
    &:before {
        @include fa-icon;
        content: fa-content( $fa-var-plus );
        /* Undefined function or ( when removed ) undefined variable */
    }
}

I believe this is because of the use of @import in the library.

Even using @forward I get errors because variables.scss is imported into both FA files. Duplicate variables error. Now, if I switch them out to use @import it will work as expected. Currently though when trying to follow what Sass suggests I'm not seeing a way to @use this library. Is there a mistake in my code? If this is not an issue with my code, could the library be updated to use @use and @forward?