将bootstrap添加到angular2-seed项目的webpack包中

Adding bootstrap to webpack bundle of angular2-seed project

本文关键字：webpack 包中 项目 angular2-seed bootstrap 添加      更新时间：2023-09-26

我想在这个Angular2种子项目中使用bootstrap: https://github.com/angular/angular2-seed

我怎样才能做到这一点?它已经添加在包中。例如使用"class="btn btn-default"将不起作用。

我尝试在vendor.browser.js中添加require('bootstrap/dist/css/bootstrap.css');，但没有效果。

加入包后。在node_modules:

中引用index.html中的链接。
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css/">

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

在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},
];

相关文章：