css - Angular 2 : How to import a stylesheet from node_modules?

Question

问题:在我的 Angular2 (4.0) 应用程序中，如何从 node_modules 中的模块导入样式表 (css)？

我有一个模块位于:

node_modules/@swimlane/ngx-datatable

我想导入这个样式表:

node_modules/@swimlane/ngx-datatable/release/index.css

我尝试了以下方法，但没有成功:

在我的组件自己的 scss 文件中:

@import '~@swimlane/ngx-datatable/release/index.css';

在我的组件中:

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'site_table',
  template: require('./site_table.html'),
  styleUrls: ['./site_table.scss', '@swimlane/ngx-datatable/release/index.css']
})

Answer 1

因为您已经在使用 SCSS，所以在您的 ./site_table.scss 中像这样导入它

@import "~swimlane/ngx-datatable/release/index";

注意:不要添加扩展名。

它将从节点包中导入样式表。这对我很有帮助，希望它也对你有用。这样您只需在组件中使用单个样式表，它看起来会更干净。