Undefined Font Awesome Variable when @use

I'm trying to use Font Awesome in my Laravel Project Sass files. I install via NPM:

npm install --save @fortawesome/fontawesome-free

Cool, I see it's installed in my node_modules and can see the scss folder is in there, everything looks good. I look at some examples of how people are including it in their Sass files and they're all using @import. If I use @import I see it also works as expected.

@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";

.add-new {
    &:before {
        @include fa-icon;
        content: fa-content( $fa-var-plus );
    }
}

Looking at the Sass support docs for @import though it says that it's discouraged:

The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead.

My problem is 2-fold:

This seems cumbersome. I'll be using Font Awesome throughout my project but to use it between files I need to remember to @use the two Font Awesome files:

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

The above Sass code doesn't seem to work. I get the error that fa-content() doesn't exist or $fa-var-plus doesn't exist. They don't seem to be accessible using the @use directive.

Since I'm new to many of these technologies ( Laravel, Sass, etc. ) I'm hoping for an informative answer that explains why this is happening and what a possible solution is. Presuming I want to follow the Sass warning and comply with using the @use directive. Maybe also explaining why/not this is advisable.

For future readers, I've brought up this issue with the Font Awesome library. If you run into similar issues maybe air your concerns in their Github issue tracker.

Solution

To answer your questions out-of-order:

Errors:

Nothing here should be causing any obvious errors. That could have something to do with the version of Sass you are running, though. I don't have Laravel experience, but it looks to me like they assume Node Sass in their docs, which does not support the new module @use syntax. In order to uses the new syntax, you'll need to make sure you have Dart Sass instead. Dart Sass is the core implementation of Sass, and will always provide the most up-to-date features.

Cumbersome:

The goal of the new syntax is to make dependencies explicit and localized, so that does mean some additional overhead in many files. Still, there would be ways to simplify what you have. I recommend creating a local Sass file that contains two @forward rules -- basically merging those two npm imports into a single, local module:

// _fa.scss
@forward "~@fortawesome/fontawesome-free/scss/fontawesome";
@forward "~@fortawesome/fontawesome-free/scss/solid";

Now you can load that single local file wherever you need font-awesome, and it will forward both the npm files:

@use "fa" as *;

.add-new {
    &:before {
        @include fa-icon;
        content: fa-content( $fa-var-plus );
    }
}

Note that the .scss extensions and _ prefixes are not required for Sass import paths.