Как импортировать CSS только в один компонент?

Question

Мне нужно импортировать стили ignite-ui только для одного компонента.

Компонент:

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

Css:

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

или

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

Это не работает.Однако, если я изменю encapsulation: ViewEncapsulation.ShadowDom на encapsulation: ViewEncapsulation.None, стили будут применены.Однако, если я перейду к другим компонентам, эти стили будут применены и к ним.Мне нужно применять стили только для одного компонента

Answer 1

@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 нет операторов импорта