时间戳

首页 > 解决方案 > 如何仅将 css 导入一个组件？

css - 如何仅将 css 导入一个组件？

问题描述

我只需要为一个组件导入 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，则会应用。但是，如果我转到其他组件，这些样式也会应用于它们。我只需要为一个组件应用样式

标签： cssangular

解决方案

@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没有导入语句

推荐阅读