@use

问题描述

我正在我的Laravel Project 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，尽管它表示不鼓励这样做：

Sass团队不鼓励继续使用@import规则。 Sass将在未来几年逐步淘汰它，并最终将其从语言中完全删除。 请改用@use规则。

我的问题是2倍：

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

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

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

---

由于我是其中许多技术（Laravel，Sass等）的新手，所以我希望能提供一个能解释为什么为什么和什么可能的解决方案是。假设我要遵循Sass警告并遵守@use指令。也许还可以解释为什么/不建议这样做。

对于将来的读者，我将Font Awesome library提出了这个问题。如果您遇到类似的问题，则可以在其Github问题跟踪器中表达您的担忧。

解决方法

要无序回答您的问题，

错误：

这里什么都不会引起任何明显的错误。不过，这可能与您正在运行的Sass版本有关。我没有Laravel经验，但是在我看来，他们似乎在文档中假设使用Node Sass，但不支持新的模块@use语法。为了使用新语法，您需要确保使用Dart Sass。 Dart Sass是Sass的核心实现，并将始终提供最新功能。

令人讨厌：

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

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

现在，您可以在需要字体的地方加载单个本地文件，它将转发两个npm文件：

@use "fa" as *;

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

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

,

最终这是解决方案：

// 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在此方面提供了巨大帮助，所以谢谢！我觉得这个问题尚未得到很好的记录，我可能会在新主题中提出后续问题。