警告 15949:4 处的字体值无效。忽略：Angular4 prod 构建

Question

Angular 应用 style.css 已导入 Roboto 字体 css

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

这在开发构建中运行良好，但对于 ng build --prod，

它给出了一个错误和字体未在浏览器上加载：

警告 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

我的一个关于材料设计图标字体的项目也发生了类似的问题。

这是我为解决我面临的类似问题所做的事情。

1. --verbose构建角度包时添加了参数。

   ng build --prod --verbose

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

   Child 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??extracted!src/styles.css: Entrypoint mini-css-extract-plugin = * chunk {0} * (mini-css-extract-plugin) 10.8 KiB [entry] [rendered]

   WARNING in Invalid font values at 1439:706. Ignoring.

3. src/styles.css上面的详细信息指定了我在开发过程中修改过的文件名。所以我评论了该文件中的所有代码并再次运行构建命令。它成功了！！！！

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

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

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

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