在Angular2中从npm安装时如何使用CSS答案

【问题标题】：How to use CSS when installed from npm in Angular2在Angular2中从npm安装时如何使用CSS
【发布时间】：2016-10-08 23:31:34
【问题描述】：

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

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 已经包含了？

【问题讨论】：

标签： angularjs angular webpack

【解决方案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

【讨论】：

我认为同样的逻辑也适用于 jquery？
是的，正确的。你也可以用 jQuery 做同样的事情。