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?
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; }
h1 { color: red; }
Remember to update your angular.json
and component files accordingly if you don't reecreate a new project to resolve that
dude ... I think your sintaxe maybe be wrong, look at https://sass-lang.com/guide you shoulding use
h1
color: red,
align: center
...
Could be because you upgraded your node. Try installing node-sass
npm install node-sass
More details about node-sass on https://www.npmjs.com/package/node-sass
Had the same problem, tried everything including reinstalling all the packages and node itself and none of them helped.
Finally the project was cloned to D:\\somefolder instead of the Desktop where I was cloning before. Then it compiled without any issues and worked fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.