Google 字体和 Sass 的问题答案

【问题标题】：Issues with Google fonts and SassGoogle 字体和 Sass 的问题
【发布时间】：2020-07-13 13:33:35
【问题描述】：

我正在尝试学习 Laravel，但遇到了一个我似乎无法用 Google 字体和 Sass 解决的问题。

我正在尝试在 app.scss 上加载我的字体：

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

但它编译为 app.css 为：

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;
700&display=swap);@charset "UTF-8";

如果我手动更正 app.css，它会起作用。但是如何让 Sass 或 Laravel 正确编译呢？

【问题讨论】：

如果源文件中有任何非 ASCII 字符，Sass 将在 CSS 输出中包含 @charset 声明。可能值得检查您的源文件。
@DanielSixl 感谢您的回复。我查看了显示隐藏空格的 app.scss 和 _variables 文件，并且使用了 vscode ext。突出显示坏字符。但我找不到任何非 ASCII 字符。有没有更好的方法来检查非 ASCII 字符？
我们可以在 Linux 上为它们使用 grep：stackoverflow.com/questions/3001177/… 但我喜欢使用 Notepad++，如下所述：stackoverflow.com/questions/20889996/…

标签： css laravel sass google-fonts

【解决方案1】：

我通过如下修改解决了它：

原文：

@import url ("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");

修改：

 @import url ("https://fonts.googleapis.com/css2?family=Rubik:400,700");

【讨论】：

不，这不起作用。 Google 返回错误 400：无效的选择器。
如果您更改 url 删除“wght@”和分号，您还必须将“css2”更改为“css”。这种方式有效。

【解决方案2】：

这是由 Webpack 中的一个已知错误引起的，该错误似乎仍处于打开状态。

详情请看：https://github.com/webpack/webpack/issues/10873

【讨论】：