如何在Angular2中从npm安装CSS

Question

我正在尝试安装以下内容：

npm install bootstrap-material-design

然后我将下面的内容添加到我的package.json中

"dependencies": {
    ...
    "bootstrap-material-design": "0.5.10"
}

那么，在使用webpack的angular2中，我如何导入？包的文档如下所示，软件包安装在node_modules/bootstrap-material-design/中

<!-- Bootstrap Material Design -->
  <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
  <link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">

因此，在头脑中，我是否包括通过以下内容：

 <!-- Bootstrap Material Design -->
      <link rel="stylesheet" type="text/css" href="node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css">
      <link rel="stylesheet" type="text/css" href="node_modules/bootstrap-material-design/dist/css/ripples.min.css">

或者angular2已经包括了？

Answer 1

最好像在app.ts文件中一样，在主模块文件中包括：

// Just make sure you use the relative path here
import '../../node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css'
import '../../node_modules/bootstrap-material-design/dist/css/ripples.min.css'

// your component (example code below)

@Component({
    selector: 'app',
    templateUrl: 'app.template.html'
})

就是这样。Webpack会负责重置的。

编辑：

如果您已经使用angular-cli/ng-cli创建了应用程序，那么您也可以将这些样式表包含到angular-cli.json中。