导入带有scss的Google字体：MIME类型冲突

我正在构建一个Angular应用程序，我正在使用scss进行样式设置，并希望导入谷歌字体

我有一个

font.scss

，其中保存了与字体相关的所有内容。我导入谷歌字体如下：

字体.scss

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500;700&display=swap');

@import 'src/styles/imports/fonts';
@import 'src/styles/imports/colors';

因为有不同的文件，我需要导入到不同的组件，我有一个名为

imports.scss

的文件，其中包含字体和更像颜色变量的内容

导入.scss

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500;700&display=swap');

@import 'src/styles/imports/fonts';
@import 'src/styles/imports/colors';

现在，myng组件可以在导入时使用字体和变量：

@import 'src/styles/imports';

尽管变量和字体都在工作，但我在Google Chrome中发现以下错误：

platform-browser.js:789 GET https://fonts.googleapis.com/css2?family=Poppins:wght@300;400[_ngcontent-dsi-c57];700&display=swap net::ERR_ABORTED 400

在Firefox中，我遇到了以下错误：

The resource from "(link to google fonts)" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

---

有没有办法解决这个问题？

也许你可以在这里找到一些提示：