How to fix styles.scss after upgrade to angular 7?

Viewed 5678

My angular 6.1 app was building and running fine.

I upgraded to angular 7.

Now on the build I get multiple errors like this.

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build- 
angular/src/angular-cli-files/plugins/raw-css- 
loader.js!./node_modules/postcss-loader/lib??embedded!./node_modules/sass- 
loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: 
C:\Users\Markku\Documents\GitHub\crds-people\node_modules\crds- 
styles\assets\stylesheets\vendors\_timepicker.scss:18:24: Can't resolve 
'//crossroads-media.s3.amazonaws.com/images/chevron-up-blue.png' in 
'C:\Users\Markku\Documents\GitHub\crds-people\src'

16 |     }
17 |     &.glyphicon-chevron-up {
> 18 |       background-image: url(//linktomys3.amazonaws.com/images/chevron-up-blue.png);
     |                        ^
  19 |     }
  20 |   }

What changed that affects the paths to my graphics?

3 Answers

Its a node-sass issue. To fix it, navigate to your project folder in your terminal and run the following command:

npm rebuild node-sass

This is dependencies issue so update your dependencies and fix insecure dependencies

1) npm audit fix  // fix insecure dependencies
2) npm install

Try to use the following command:

npm install --save-dev --unsafe-perm node-sass
Related