组件文件夹中的component.scss不起作用

Question

当我把样式代码放入component.scss,但它不会影响引用的目标,但是当我把样式代码放在src/scss/style.scss它上面时,它可以很好地工作.有谁知道这是什么问题？

如果缺乏技术知识,请参考我一些材料进行研究.

Answer 1

如果您尝试在子组件内部设置样式,它将无法工作.你应该在scss中使用ng-deep.有关样式的更多信息.

::ng-deep .className {}

Answer 2

在组件中，注意作为 StyleUrl 给出的内容：

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

也许你的语法不好，或者你指的是一个简单的something.component.**css**而不是.scss文件。

Answer 3

对我来说，我需要设置ViewEncapsulation.None我的styleURLs生效：

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

@Component({
  selector: 'app-testing',
  templateUrl: './testing.component.html',
  styleUrls: ['./testing.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class TestingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

我不确定为什么这是必要的。至少在 Angular 8 中需要它，但幸运的是在 Angular 9 中不需要。