@use 时未定义的字体真棒变量

Question

我正在尝试在我的 Laravel 项目 Sass 文件中使用 Font Awesome。我通过 NPM 安装：

npm install --save @fortawesome/fontawesome-free

太棒了，我看到它安装在我的 node_modules 中并且可以看到 scss 文件夹在那里，一切看起来都不错。我看了一些人们如何将它包含在他们的 Sass 文件中的例子，他们都在使用 @import。如果我使用 @import，我发现它也能按预期工作。

@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 );
    }
}

查看 Sass 支持 docs for @import 虽然它说不鼓励：

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.

我的问题有两个：

这看起来很麻烦。我将在整个项目中使用 Font Awesome，但要在文件之间使用它，我需要记住 @use 两个 Font Awesome 文件：

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

上面的 Sass 代码似乎不起作用。 我收到 fa-content() 不存在或 $fa-var-plus 的错误不存在。使用 @use 指令似乎无法访问它们。

由于我对其中许多技术（Laravel、Sass 等）不熟悉，所以我希望得到一个信息丰富的答案来解释 为什么 这种情况正在发生，什么可能的解决方案是。假设我想遵循 Sass 警告并遵守使用 @use 指令。也许还解释 why/not 这是可取的。

对于未来的读者，我已经在 Font Awesome library 中提出了这个问题。如果您运行遇到类似问题，可以在他们的 Github 问题跟踪器中表达您的担忧。

Answer 1

回答您的问题out-of-order：

错误：

这里应该没有任何明显的错误。不过，这可能与您运行的 Sass 版本有关。我没有 Laravel 经验，但在我看来他们在他们的文档中使用了 Node Sass，这不支持新的模块 @use 语法。为了使用新的语法，你需要确保你有 Dart Sass。 Dart Sass 是 Sass 的核心实现，并将始终提供最多 up-to-date 功能。

繁琐：

新语法的目标是使依赖关系显式和本地化，因此这确实意味着许多文件会有一些额外的开销。尽管如此，还是有办法简化你所拥有的。我建议创建一个包含两个 @forward 规则的本地 Sass 文件——基本上将这两个 npm 导入合并到一个本地模块中：

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

现在您可以在任何需要的地方加载那个本地文件 font-awesome，它会转发两个 npm 文件：

@use "fa" as *;

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

请注意，Sass 导入路径不需要 .scss 扩展名和 _ 前缀。

Answer 2

最终的解决方案是：

// scss/1-globals/_fa.scss
@forward "~@fortawesome/fontawesome-free/scss/fontawesome";
@forward "~@fortawesome/fontawesome-free/scss/solid" as fas-*; // Prefixed to prevent conflicts

// scss/3-components/_my-component.scss
@use "1-globals/fa" as *;

.button {
    
    &:before {
        @extend %fa-icon; // Base Font Awesome Styles
        @extend .fas;     // FA Type (far, fas, fab)
        content: fa-content( $fa-var-plus ); // Function to pull in icon
    }
    
}

Mirian 在这方面帮了大忙，非常感谢！我觉得这个问题还没有得到很好的记录，我可能会在新主题中提出后续问题。

@use 时未定义的字体真棒变量

Undefined Font Awesome Variable when @use

sass

laravel

font-awesome

webpack