css - 15949 处的无效字体值警告 :4. 忽略:Angular4 产品构建

Question

Angular application style.css 导入了Roboto font css

@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,700');

这在开发构建中工作正常，但对于 ng build --prod，

它给出了一个错误并且字体没有在浏览器上加载:

WARNING in Invalid font values at 15949:4.

Nodejs: 6.11.4
Npm: 3.10.10
@angular/cli: 1.6.8
 "@angular/animations": "^4.3.0",
    "@angular/cdk": "2.0.0-beta.12",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/material": "2.0.0-beta.12",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",

Answer 1

我的一个关于 Material Design 图标字体的元素也发生了类似的问题。

以下是我为解决我面临的类似问题所做的工作。

1. 在构建 Angular 包时添加了 --verbose 参数。

   ng build --prod --verbose

2. 在执行上述命令后出现的详细信息中给了我以下详细信息:

   子 mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/lib/index.js??提取!src/styles.css: 入口点 mini-css-extract-plugin = * block {0} * (mini-css-extract-plugin) 10.8 KiB [入口] [渲染]

   1439:706 处的无效字体值警告。忽略。

3. 上面的细节指定了一个文件名src/styles.css，我在开发过程中修改了它。所以我注释了该文件中的所有代码并再次运行构建命令。它成功了!!!!。

4. 现在我知道问题出在 styles.css 的某处，所以我开始将几行代码从注释内部移到注释外部，然后再次运行命令，看看是否出现警告。

   重复这两个步骤 20 多次后，出现警告 WARNING in Invalid font values。这就是我如何知道以下代码导致了问题

   .mdi:before, .mdi-set { transition: all 0.2s; }

   所以我删除了上面的代码并取消注释了同一文件 styles.css 中的所有其余代码。现在警告 WARNING in Invalid font values 不会出现，angular 可以完美地构建包。