Angular Can not use Scss in new generated component

Question

As shown below Error Error1:

[WDS] Errors while compiling. Reload prevented.
./src/app/products/products.component.sass Module build failed (from./node_modules/sass-loader/lib/loader.js):

This is my code:

\\This is my new components product.components.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.sass']
})
export class ProductsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

Here is error

ERROR in./src/app/products/products.component.sass Module build failed (from./node_modules/sass-loader/lib/loader.js):
#DIV_1 { ^ Invalid CSS after "#DIV_1 {": expected "}", was "{" in...\src\app\products\products.component.sass (line 1, column 9) i ｢wdm｣: Failed to compile.

Answer 1

I change from

styleUrls: ['./products.component.sass']

to

styleUrls: ['./products.component.css']

This can fix my problem. But I don't think this is allowed answer. I would like to use scss. Then I might mark this for someone who face the same as me and need quick fixed.

Answer 2

You are using curly brackets in a.sass file.

If you want to use brackets you need to use.scss extension

Read the difference here: Sass: Syntax