如何使用 Angular cli 为 Angular 组件样式启用 SCSS 内联模板答案

【问题标题】：How to enable SCSS inline template for angular component style with angular cli如何使用 Angular cli 为 Angular 组件样式启用 SCSS 内联模板
【发布时间】：2017-08-28 15:54:17
【问题描述】：

在Codelyzer test file，我看到在样式内联模板中使用了 SCSS 蜜蜂。是否可以使用 Angular CLI 启用它？

我的 SCSS 设置在使用 styleUrls 时有效，但不适用于直接 styles 组件装饰器属性。

更新：

我正在使用 Angular CLI 1.0.0 和 Angular 4.0.1

这是 WebStorm IDE 中显示的错误

【问题讨论】：

我想它可以与 Webpack 插件一起使用——如果不是现在在将来的某个时候。也就是说，我认为它目前在 angular-cli 中不可用。
如果有 webpack 插件会很高兴知道插件的名称

标签： angular sass angular-cli angular4

【解决方案1】：

不幸的是，（此时）这是不可能的。来自 Angular 文档：

添加到@Component.styles 数组的样式字符串必须用 CSS 编写，因为 CLI 无法将预处理器应用于内联样式。

https://angular.io/guide/component-styles#non-css-style-files

【讨论】：

所以我想如果我想定位宿主元素我必须使用单独的文件？
不，:host{ ... } 样式仍然适用于组件内联样式。

【解决方案2】：

Angular v12 支持 @Component 装饰器 styles 字段中的内联 SCSS

要在现有应用程序中启用，请在以下部分中将 "inlineStyleLanguage": "scss” 添加到 angular.json

architect.build.options
architect.test.options

对于 scss 是选定样式的新 Angular CLI 项目，inlineStyleLanguage 配置将默认为 scss

【讨论】：

你能在模板中使用它吗？因为在我看来它只在组件定义中Starting in v12, Angular components will now support inline Sass in the styles field of the @Component decorator
@Crocsx 更新了答案以使其更清晰?