我如何使用 css 样式表更改已生成的 angular 应用程序 - 使用 scss

Question

我已生成 angular 应用程序以使用 css - 这是默认应用程序。在那之后，我看到该项目将在未来增长，我想将下一个组件与 scss 样式表一起使用。

我在我的 angular.json 文件中编辑了它

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

之前是 - “styleext”：“css”

我重新启动了服务器，我尝试用

生成新组件

ng g c some-new-compo

但现在 angular cli 使用 css 样式表而不是 scss

再次生成组件

我正在使用 angular 10 版本。

这需要怎么做？

Answer 1

我发现了错误。敌人 angular 版本 9+ 它需要是：style insteadm styleext

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

Answer 2

使用以下命令更改angular配置

ng config schematics.@schematics/angular:component.style scss

并打开 angular.json 文件

改变你的

"schematics": {}

至

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

更改自（在两个地方）

"styles": [
    "src/styles.css"
 ],

至

"styles": [
    "src/styles.scss"
 ],

然后手动将所有组件 .css 更改为 .scss 并在 .ts 文件中更改 .ts 文件，如下所示

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
})

然后创建一个组件，它将按照您的预期创建 .scss 文件

How can i change already generated angular app with css stylesheet - to use scss