angular - Angular 12 使用内联 scss

Question

我刚刚更新到 Angular 12，我想尝试其中一项新功能，即内联 scss / sass

我可以看到它在我的 angular.json 中启用：

"inlineStyleLanguage": "scss"

我正在寻找有关如何执行内联 scss 的示例，因为这是我以前从未做过的事情，但在网上找不到任何示例。

如何使用 Angular 12 中的内联 sass 功能？

Answer 1

通过内联 scss 意味着现在您可以在 @Component 装饰器的样式字段中使用 scss。以前，由于 Angular 编译器，Sass 只能在外部资源（与组件一起的单独的 scss 文件）中使用。

前任：-

import { Component } from '@angular/core';

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

  // Possible for scss from angular 12
  styles: [
    `
    span {
      color: grey;
    }
    `
  ]
})
export class AppComponent {
  title = 'angular12 app';
}

样式被应用并添加到浏览器中的样式标签：-