Javascript – Angular CLI 7: Sass failed to compile

angularangular-clijavascriptsass

few moments ago I installed Angular Cli 7 and started clean project by 

ng new my-app

I selected precompiler SASS for css, but when I'm editing file styles.sass then is not working, my styles.sass looks like this

h1 { color: red }

but ng serve show this message

Failed to compile.

./src/styles.sass
(./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref–14-3!./src/styles.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

h1 { ^
Invalid CSS after "h1 {": expected "}", was "{"
in /Users/a/Documents/angular-projects/my-app/src/styles.sass
(line 1, column 5)

how to fix it? and why that's happen?

Best Answer

  • The CLI offers a command line flag to change your style when creating a new project with ng new my-app --style=scss

  • As you can see, the extension is .scss, not .sass (at least for the syntax you're using, which is LESS)

  • You are missing a semicolon h1 { color: red; }

  • Remember to update your angular.json and component files accordingly if you don't reecreate a new project to resolve that

Related Topic