Question

Angular应用样式。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

类似的问题发生在我的一个有关Material Design图标字体的项目中。

这是我要解决的类似问题。

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

ng build --prod --verbose
在执行上述命令后出现的详细信息中，为我提供了以下详细信息：

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.
上面的详细信息指定了在开发过程中修改的文件名src/styles.css。因此，我注释了该文件中的所有代码，然后再次运行build命令。和它的工作！！！。
现在我知道问题出在styles.css中，因此我开始将几行代码从内部注释移到外部注释，然后再次运行命令，看看是否出现警告。
重复这两个步骤20多次后，出现警告WARNING in Invalid font values。那就是我如何知道以下代码导致了问题

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

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

Answer 2

即使使用冗长的设置，我也无法从输出中确定哪个文件出了问题。它一起列出了项目中包括的所有CSS和SCSS文件，最后列出了所有警告。我什么也看不到与特定文件相关的特定警告。

我最终要做的是从angular.json中的"styles"操作的"build"属性中删除所有条目。然后，我将它们一次又添加回去，并使用ng build --prod重建应用程序。警告出现后，我便知道这是我添加回的最后一个文件出现问题。然后，我从警告消息中查找该文件中的属性（对我来说是background，但在OP的情况下是font），直到我发现一个具有无效值的文件，并进行了更改设置为有效值。

Answer 3

请参阅此处以解决类似问题：https://github.com/angular/angular-cli/issues/9648

运行“ ng build --target = production --environment = prod --aot = false”，当我遇到类似问题时，能够在没有警告的情况下获得构建

Answer 4

花了很多时间对此进行调试，最终才意识到我的问题。就我而言，是font文件中的styles.scss属性，我将它与变量一起使用，例如font: 10px $font-regular。我不知道为什么这是“错误的”，但是当我将其更改/拆分为多个属性时，WARNING消失了。像这样：

{
  font-family: $font-regular;
  font-size: 10px;
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  line-height: normal;
}

警告15949：4的无效字体值。忽略：Angular4产品构建

4 个答案: