将引导程序添加到 angular2-seed 项目的 webpack 包中答案

【问题标题】：Adding bootstrap to webpack bundle of angular2-seed project将引导程序添加到 angular2-seed 项目的 webpack 包中
【发布时间】：2017-03-21 10:58:56
【问题描述】：

我想在这个 Angular2 种子项目中使用引导程序：https://github.com/angular/angular2-seed

我怎样才能做到这一点？它已经添加到 package.json 但例如使用 "class="btn btn-default" 将无效。

我尝试在vendor.browser.js 中添加require('bootstrap/dist/css/bootstrap.css'); 无效。

【问题讨论】：

标签： javascript css twitter-bootstrap angular webpack

【解决方案1】：

我只是想弄清楚这一点，所以我想分享一下：

在tools/config/project.config.ts 中，在this.NPM_DEPENDENCIES 赋值数组中添加以下行：

{src: 'bootstrap/dist/js/bootstrap.min.js', inject: 'libs'},

并在this.APP_ASSETS 赋值数组中添加以下行：

{src: 'node_modules/bootstrap/dist/css/bootstrap.min.css', inject: true, vendor: false},

完整示例：

this.NPM_DEPENDENCIES = [
  ...this.NPM_DEPENDENCIES,
  {src: 'bootstrap/dist/js/bootstrap.min.js', inject: 'libs'},
];

// Add `local` third-party libraries to be injected/bundled.
this.APP_ASSETS = [
  ...this.APP_ASSETS,
  {src: 'node_modules/bootstrap/dist/css/bootstrap.min.css', inject: true, vendor: false},
];

【讨论】：

【解决方案2】：

添加 package.json 后，执行 npm install 并从 node_modules 引用 index.html 中的链接：

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css/">

【讨论】：

也许我应该澄清一下：我希望它包含在 webpack 捆绑的包中。我不应该碰 index.html。
为什么？不明白有什么好处