Question

以下SCSS样式未在Angular中应用：

app.component.scss

body{
  background-color:red;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import { ViewEncapsulation } from '@angular/core'

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

export class AppComponent implements OnInit {
}

HTML：

<body>
  <nav>
  </nav>
</body>

Answer 1

您无法通过app组件设置body标签的样式。如果您想要设置背景颜色，则需要在styles.scss else文件中进行设置。

还假设要在应用程序组件中为标签设置背景色，则标签必须具有内容，然后才能看到背景色，或者您可以仅为所述标签设置高度，然后颜色就会显示< / p>

Answer 2

您的app.component.html不能具有body标签，因为该角度位于在index.html页面的body标签内创建的app-root标签中

实际呈现为

<body>
<app-root>
</app-root>
</body>

但是您要尝试的是将其渲染为

<body>
<app-root>
<body>
<nav>
</nav>
</body>
</app-root>
</body>

并且scss被应用为

body[app-root]{ background-color:red}

哪个不行。

因此，如果要应用背景色，则必须在全局scss文件中设置样式，即

出现在应用程序的根文件夹中的Style.scss或在编辑器的命令面板中搜索style.scss

SCSS样式未在Angular中应用

2 个答案: