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，節點包解析可能無法正常工作。 我可能錯了。

Answer 3

如果你使用angular.json文件而不是webpack的新的angular-cli，@ sickelap的答案中的波浪號（〜）可能對你不起作用。

相反，你可以做的是在angular.json文件中添加： -

        ...
        "styles": [
          ...
        ],
        "stylePreprocessorOptions": {
          "includePaths": [
            "node_modules/@swimlane"
          ]
        },
        ...

然后，在組件的.scss文件中，插入：

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

請注意，不需要.css擴展名。