gpt4 book ai didi

Angular 9 : SCSS Import from fonts. google.com 在生产模式下不工作

转载 作者:行者123 更新时间:2023-12-05 07:11:13 25 4
gpt4 key购买 nike

我正在 Angular 9 应用程序中导入字体 style.scss使用以下语法:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

这在我运行 ng serve 时有效.但是,当在生产模式下部署 Angular 包时,导入似乎不起作用。生产包不会尝试加载此字体 - 没有网络请求。此外,Chrome 控制台中没有任何错误。

我在本地安装了可以工作的字体 - 所以我怀疑这与第三方托管字体有关:

@font-face {
font-family: Korolev;
font-weight: 600;
font-style: normal;
src: url('assets/fonts/korolev-medium-webfont.ttf');
}

追查错误,它与一个叫做injectStylesIntoStyleTag.js的东西有关, 来自 Webpack style-loader .当 ng serve 时,这似乎可以解决问题在开发模式下运行,我们可以看到从创建 <style> 的脚本发起的请求在加载字体的头部。然而,当在生产模式下运行时,加载字体的机制不同或者它似乎没有启动。

network log entry

  • 从第三方导入的 SCSS 是否应该在 Angular 生产模式下正常工作?

  • 如果 import不推荐使用第三方字体,在样式表中使用第三方字体的首选机制是什么?

最佳答案

我遇到了同样的问题,我现在通过深入研究 this angular's issue 解决了它在他们的 github 上:

I actually had this issue because my @import statement pulling in the google font was not being rendered as the first line in my compiled css file. I recently upgraded my version of Angular. Not sure why this change happened, but I solved for my case by breaking my font imports into a scss partial file and imported THAT partial file before anything else. The result is that my font @imports are the first line of my styles.css.

TLDR;
@import 语句必须位于编译后的 css 文件的顶部,否则它们将被忽略。

为此,我创建了一个文件 font.scss,其中包含我所有的 @import,如下所示:

@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
// [...]

然后您需要更新您的 angular.json 以首先加载此文件:

...
"styles": [
"src/assets/scss/fonts.scss",
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss"
],
...

关于Angular 9 : SCSS Import from fonts. google.com 在生产模式下不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60875869/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com