Angular 不能在新生成的組件中使用 Scss

Question

如下圖錯誤Error1：

[WDS] 編譯時出錯。 防止重新加載。
./src/app/products/products.component.sass 模塊構建失敗（來自./node_modules/sass-loader/lib/loader.js）：

這是我的代碼：

\\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() {
  }
}

這是錯誤

錯誤 in./src/app/products/products.component.sass 模塊構建失敗（來自./node_modules/sass-loader/lib/loader.js）：
#DIV_1 { ^ Invalid CSS 在 "#DIV_1 {": 預期 "}" 之后，是 "{" in...\src\app\products\products.component.sass（第 1 行，第 9 列）i ｢wd編譯失敗。

Answer 1

我從

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

至

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

這可以解決我的問題。 但我不認為這是允許的答案。 我想使用scss。 然后我可能會將此標記為與我相同並且需要快速修復的人。

Answer 2

您在 a.sass 文件中使用大括號。

如果要使用括號，則需要使用 .scss 擴展名

在此處閱讀差異： Sass：語法