如何解决Angular 12 使用内联 scss
我刚刚更新到 Angular 12,我想尝试其中一项新功能,即内联 scss/sass
我可以在我的 angular.json 中看到它已启用:
"inlineStyleLanguage": "scss"
我正在寻找有关如何执行内联 scss 的示例,因为这是我以前从未做过但在网上找不到任何示例的示例。
如何在 Angular 12 中使用内联 sass 功能?
解决方法
内联 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';
}
样式被应用并添加到浏览器中的样式标签:-
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。