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

如果您正在使用新的角度-CLI与angular.json文件，而不是的WebPack，在@ sickelap的答案的符号（〜），可能不为你工作。

相反，你可以做的是在你的angular.json文件补充一点： -

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

然后，在组件的.scss文件，插入此：

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

请注意，不需要.css扩展。