After upgrade to Angular 6 - CssSyntaxError:

Question

I have a an angular 5 application that I am updating to angular 6.

After going though all of the upgrade steps per update.angular.io I am left with the following error during compile.

It references my styles.scss and some path for Glyphicons. Seems like a strange issue to have after angular updates. Is there a path that the angular update process missed?

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'),

I have tried removing all node modules and reinstalling. Ho help. Ideas?

Answer 1

Have you changed your angular.json file to reflect and use SCSS ?

Add this line, and see if the problem persists.

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

Also make sure you have node-sass installed in place.

Answer 2

I found what I feel is more of a workaround than a great solution. I added the following to the top of my styles.scss file.

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