如何只将css导入一个组件？

我只需要为一个组件导入ignite ui样式

组成部分：

@Component({
  selector: 'app-detailed-report',
  templateUrl: './detailed-report.component.html',
  styleUrls: ['./detailed-report.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})

Css:

或

这是行不通的。但是，如果我将

封装：viewenclovation.ShadowDom

更改为

封装：viewenclovation.None

则会应用样式。但是，如果转到其他组件，这些样式也将应用于它们。我只需要为一个组件应用样式

@Component({
  selector: 'app-detailed-report',
  templateUrl: './detailed-report.component.html',
  styleUrls: [
    './detailed-report.component.css',
    '../../../../../../../../node_modules/igniteui-angular/styles/igniteui-angular.css' // make sure it's the right path
  ],
  encapsulation: ViewEncapsulation.ShadowDom
})

或者切换到

scss

并将其导入样式文件中

@import "~igniteui-angular/styles/igniteui-angular.css";

css

没有导入语句

或者切换到

scss

并将其导入样式文件中

@import "~igniteui-angular/styles/igniteui-angular.css";

---

css

没有导入语句

或使用webpack使用@importany ideas为什么第一种方法不起作用？仅适用于ViewEncapsulation。默认情况下，非角度视图是封装的，并且并非所有浏览器都支持shadow DOM检查以查看其工作方式我使用的是chrome，ShadowDom适用于简单样式，但不适用于此导入的样式所以，当您将

css

文件添加到

styleurl

中时，它是否有效？或者使用webpack使用@importany ideas为什么第一种方法不起作用？仅适用于ViewEncapsulation。默认情况下，非角度视图是封装的，而且并非所有浏览器都支持shadow DOM检查以查看其工作方式我使用的是chrome，ShadowDom适用于简单样式，但不适用于此导入的样式。因此，当您将

css

文件添加到

styleUrls

时，它是否工作？

@import "~igniteui-angular/styles/igniteui-angular.css";