在 Angular 6+ (styleExt) 中使用 scss 作为默认样式表

Posted 2023-02-22

【中文标题】在 Angular 6+ (styleExt) 中使用 scss 作为默认样式表

【英文标题】：Using scss as default style sheet in Angular 6+ (styleExt)

【发布时间】：2018-11-10 04:09:36

【问题描述】：

显然，声明默认样式表扩展的方式从 Angular 6 开始发生了变化。 angular.json 中的 styleExt 属性不再被识别。

对于新项目，可以使用 CLI 上的 --style=scss 选项在 new 命令上进行设置。

但是，对于我从 Angular

这个问题与 Angular 5 到 6 版本的重大更改密切相关。

【问题讨论】：

Angular-cli from css to scss的可能重复

@T04435 我看不出这是怎么复制的。我明确指出，这个问题是关于 Angular 中的特定版本更改，这根本不是另一个问题的一部分。仅仅因为部分修改后的答案也适用于此处并不能使问题相同。

【参考方案1】：

在angular.json 中设置的位置发生了变化。现在有两种方法可以设置此选项。

通过 Angular CLI：

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

直接在angular.json:

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

Angular 9 更新：

请注意，从 Angular 9 开始，styleext 被重命名为 style。所以我们最终得到：

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

和

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

【讨论】：

当我尝试这个时，我仍然将全局 styles.css 作为 css 文件，所以我无法利用 scss 解释。如果我尝试重命名为 styles.scss（并更新了 angular.json 中的引用，则构建失败了。

@MichaelCoxon 模板设置仅定义将为新组件生成哪种样式表类型。它对现有的没有任何影响。尤其不是全球styles.css。不确定您是否可以在其中使用 SCSS。

要使用全局 styles.scss，您需要更改 angular.json 中其他地方的引用。查看 projects.project-name.architect.build.styles 和 projects.project-name.test.styles 。将值更改为指向styles.scss 而不是styles.css 对于已经创建的项目，不要忘记更改实际文件。

如何使用单独的 global.scss 而不是 style.css "defaultProject": "pareo", "schematics": "@schematics/angular:component": "prefix": “app”，“styleext”：“scss”，“styles”：[“src/app/provider-portal/provider-portal.scss”]，“@schematics/angular:directive”：“prefix”：“应用”

根据这张已关闭的票证 github.com/ngrx/platform/issues/2248 新版本的 Angular CLI styleExt 已替换为 style - 我在两个使用 Angular anf Angular CLI 版本 8 的库中对其进行了测试。

【参考方案2】：

要为现有项目从 css 转到 scss，请按以下步骤操作：

在angular.json 文件中

在build 部分和test 部分中，替换：

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

替换：

"schematics": ,"schematics": "@schematics/angular:component": "style": "scss" ,

使用ng config schematics.@schematics/angular:component.styleext scss 命令有效，但不会将配置放入 同一个地方。

在您的项目中将您的 .css 文件重命名为 .scss