升级到 Angular 6 后 - CssSyntaxError：

Question

我有一个 Angular 5 应用程序，我正在更新到 Angular 6。

在完成每个 update.angular.io 的所有升级步骤后，我在编译期间出现以下错误。

它引用了我的 styles.scss 和 Glyphicons 的一些路径。角度更新后似乎是一个奇怪的问题。是否存在角度更新过程遗漏的路径？

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss- 
loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\Markku\Documents\GitHub\crds-wayfinder\node_modules\bootstrap-sass\assets\stylesheets\bootstrap\_glyphicons
.scss:14:9: Can't resolve 'twbs-font-path(%22bootstrap/glyphicons-halflings-regular.eot%22' in 'C:\Users\Markku\Documents\GitHub\crds-wayfinder\src'

12 |   @font-face {
13 |     font-family: 'Glyphicons Halflings';
> 14 |     src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
 |         ^
15 |     src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('
embedded-opentype'),
16 |          url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),

我已尝试删除所有节点模块并重新安装。何帮忙。想法？

Answer 1

我发现我觉得更多的是一种解决方法，而不是一个很好的解决方案。我将以下内容添加到我的 styles.scss 文件的顶部。

$bootstrap-sass-asset-helper: false;
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$icon-font-name: "glyphicons-halflings-regular";

Answer 2

您是否更改了angular.json 文件以反映和使用SCSS？

添加这一行，看看问题是否仍然存在。

"defaults": {
  "styleExt": "scss",
  "component": {
  }
}

还要确保您已安装 node-sass。