0

I am trying to write a simple css syntax within component's sass files in angular 7, but i am facing a compilation error as shown below.

enter image description here

sass file only contain simple css as shown

.full-width {
   width: 100%;
}

In earlier angular versions, I didn't have such issue.

Umair Jameel
  • 1,573
  • 3
  • 29
  • 54

2 Answers2

3

According to the file extension of your SCSS file, you're actually using SASS, an older version of SCSS. As indicated in the docs for the Sass syntax, the SASS language uses indented syntax.

From the section on SASS:

The indented syntax supports all the same features as SCSS, but it uses indentation instead of curly braces and semicolons to describe the format of the document.

What you should do would be to either change the file extension of that SCSS file to .scss, or convert the SCSS syntax to SASS.

Edric
  • 24,639
  • 13
  • 81
  • 91
  • Hi, thanks. It worked. Can you please tell me the project configuration that I need to change so scss format works all over the project and by default .scss files should be created rather than .sass? – Umair Jameel Jun 06 '19 at 14:57
  • 1
    @UmairJameel See this other question on StackOverflow for that: https://stackoverflow.com/questions/50619327/using-scss-sass-as-default-style-sheet-in-angular-6-styleext (TL;DR - run `ng config schematics.@schematics/angular:component.styleext scss` in your terminal to set the configuration property) – Edric Jun 06 '19 at 14:59
2

Is this SASS or SCSS ?

if this is SASS, then the brackets are invalid. just remove them for valid SASS.

.full-width 
   width: 100%;

if you want to keep the brackets, then you want to use the SCSS language instead.

Check the guide here to see the differences between the two: https://sass-lang.com/guide

Chris Barr
  • 29,851
  • 23
  • 95
  • 135
  • Hi, thanks. It worked. Can you please tell me the project configuration that I need to change so scss format works all over the project and by default .scss files should be created rather than .sass? – Umair Jameel Jun 06 '19 at 14:57
  • 1
    that should have been an option when you created a new angular app, but if you look inside the `angular.json` file it should list which language is being used for styles. Check this article out for instructions on how to change the language via a CLI command: https://medium.com/@manivel45/configuring-angular-7-project-with-sass-bootstrap-and-angular-material-design-69b0f033dc04 – Chris Barr Jun 06 '19 at 15:06