Angular 12 使用内联 scss

Question

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

我可以在我的 angular.json:

中看到它已启用

"inlineStyleLanguage": "scss"

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

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

Answer 1

inline 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';
}

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

Angular 12 使用内联 scss

Angular 12 using inline scss

angular

angular12