CODEWITHSUNDEEP
cssangular
Konstantin
Konstantin

Reputation: 139

How to import css to only one component?

I need to import ignite-ui styles only for one component.

Component: 

@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";

or 

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

This does not work. However, if I change encapsulation: ViewEncapsulation.ShadowDom to encapsulation: ViewEncapsulation.None the styles are applied. However, if I go to other components, these styles are applied to them also. I need to apply styles only for one component

Upvotes: 0

Views: 3413

Answers (1)

Ahmed Kamal
Ahmed Kamal

Reputation: 3000

@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
})

or switch to scss and import it in the styles file

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

css don't have import statements

Upvotes: 2

Related Questions