我如何使用 css 样式表更改已经生成的角度应用程序 - 使用 scss答案

【问题标题】：How can i change already generated angular app with css stylesheet - to use scss我如何使用 css 样式表更改已经生成的角度应用程序 - 使用 scss
【发布时间】：2021-05-05 03:17:49
【问题描述】：

我已经生成了使用 css 的 Angular 应用程序 - 这是默认应用程序。在那之后，我看到该项目将来会发展壮大，我想使用带有 scss 样式表的下一个组件。

我在 angular.json 文件中对其进行了编辑

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

以前是 - "styleext": "css"

我重新启动了服务器，我尝试生成新组件

ng g c some-new-compo

但现在 angular cli 再次使用 css 样式表而不是 scss 生成组件

我使用的是 Angular 10 版本。

这需要怎么做？

【问题讨论】：

也许这有帮助？ indepth.dev/posts/1330/…

标签： angular angular-cli

【解决方案1】：

使用以下命令更改角度配置

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 文件，如下所示

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

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

【讨论】：

【解决方案2】：

我发现了错误。 Foe angular 版本 9+ 它必须是：style insteadm styleext

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

【讨论】：