对于Angular 12，更新Angular。json:

"schematics": {
   "@schematics/angular:component": {
      "style": "scss"
    }
  }

and:

"build": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

"test": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

我注意到在移动到scss文件时一个非常烦人的陷阱!!在app.component.ts中，必须从简单的:styleUrls: [' app.ponent .scss']转移到styleUrls: ['./ app.ponent .scss'] (add ./)

ng在生成新项目时这样做，但在创建默认项目时似乎不这样做。如果在ng构建过程中看到resolve错误，请检查此问题。我只花了1个小时。

引用自官方github回购这里-

以安装为例 NPM安装node-sass 将项目中的.css文件重命名为.scss或.sass。它们将被自动编译。 Angular2App的options参数有sassCompiler、lessCompiler、stylusCompiler和compassCompiler选项，它们直接传递给各自的CSS预处理器。

在这里看到的

https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

告诉angular-cli默认总是使用scss

为了避免每次生成项目时都传递——style scss，你可能想要全局调整angular-cli的默认配置，使用以下命令:

ng set --global defaults.styleExt scss

请注意，某些版本的angular-cli包含读取上述全局标志的错误(见链接)。如果你的版本包含这个错误，生成你的项目:

ng new some_project_name --style=scss

设置为全局默认值

Ng设置默认值。styleExt = scss——全球

Ng set——全局默认值。styleExt=scss自ng6起已弃用。你会收到这样的信息:

Get /set已弃用，改用config命令

你应该使用:

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

如果你想要针对一个特定的项目(用你的项目名替换{project}):

ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'