SCSS：如何在SCSS文件中导入Google字体？

Question

我试图在main.scss文件中导入Google字体，但是以下代码无效：

@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");

有办法吗？我在stackoverflow中寻找这个问题，但我找不到具体的答案......

有人能帮助我吗？

Answer 1

请尝试以下方法，而不是使用url()：

@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700';

Answer 2

将Google字体导入Sass的正确语法：

@import url('https://fonts.googleapis.com/css2?family=Alegreya + Sans + SC:wght@400;500;800');

Answer 3

我的案例中的另一个示例，用于多次导入：

CSS： @import url（'https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap'）;

SCSS： @import'https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap';

Answer 4

没错，使用 Gulp 和 Dart Sass 都可以。我更喜欢 Sass-方式，只是说。因此，使用新的 Google 字体语法：

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

或

@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap";

给出从 Sass 编译到 CSS 的相同、准确的结果。然后，如果您在 .scss 文件中添加其中之一，则完全不必担心。