Angular2：如何從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"; 

注：不添加擴展名。

它將從節點包中導入樣式表。這讓我很滿意，希望它也能爲你效勞。這樣你只需要在你的組件中使用單個樣式表，它會看起來更乾淨。

Answer 2

了一個完整的相對URL試試：

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

沒試過你的符號，但節點封裝的分辨率，不的WebPack可能無法正常工作。但我可能是錯的。