如何解决@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倍:
- 这似乎很麻烦。我将在整个项目中使用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
指令。也许还可以解释为什么/不建议这样做。
对于将来的读者,我将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在此方面提供了巨大帮助,所以谢谢!我觉得这个问题尚未得到很好的记录,我可能会在新主题中提出后续问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。