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

Posted 2023-03-06

【中文标题】将引导程序添加到 angular2-seed 项目的 webpack 包中

【英文标题】：Adding bootstrap to webpack bundle of angular2-seed project

【发布时间】：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'); 无效。

【参考方案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。

为什么？不明白有什么好处