将外部字体加载到 SASS 时出现“无效 CSS”错误答案

【问题标题】：'Invalid CSS' error when loading external font into SASS将外部字体加载到 SASS 时出现“无效 CSS”错误
【发布时间】：2020-11-27 12:38:44
【问题描述】：

尝试在我的 SASS 文件中加载外部字体时出现错误。下面是从 all.sass 加载字体的代码（与leaguespartan-bold-webfont.woff 和leaguespartan-bold-webfont.woff2 在同一目录中）：

@font-face {
    font-family: 'league_spartanbold';
    src: url('leaguespartan-bold-webfont.woff2') format('woff2'),
         url('leaguespartan-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

当我尝试在本地运行时的错误消息：

@font-face {
           ^
      Invalid CSS after "@font-face {": expected "}", was "{"

【问题讨论】：

文件的扩展名是什么？是.sass 还是.scss？
它是 .sass 但我可以将其更改为 .scss
你能检查一下使用.scss扩展名编译相同的代码吗？

标签： css sass fonts

【解决方案1】：

您可能需要文件扩展名.scss，它用于 Sass 的类 CSS 语法。

另请参阅：https://stackoverflow.com/a/5654471/864799

否则，您需要切换 font-face 声明以使用不包含大括号的空格重要 .sass 语法。

【讨论】：