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：语法