如何将bootstrap 3添加到基于Angular2 webpack的项目中

我已经为jquery和bootstrap安装了npm包，然后在vendor.ts添加了导入，但是我仍然没有在浏览器上显示任何引导程序样式。

 ... import 'jquery/dist/jquery.js' import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/js/bootstrap.js'; ... 

我也尝试在webpack.common.js添加另一个条目，但这也没有帮助。

 entry: { 'bootstrap': './node_modules/bootstrap/dist/css/bootstrap.min.css', 'polyfills': './src/polyfills.ts', 'vendor': './src/vendor.ts', 'main': './src/main.browser.ts' } 

任何帮助将不胜感激，谢谢。

Answer 1

您可以使用其中一个可用的角度种子项目。 例如，这一个https://github.com/preboot/angular2-webpack

要安装bs，只需运行npm install jquery bootstrap --save

然后将以下内容添加到vendor.ts

 import 'jquery'; import 'bootstrap/dist/js/bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; 

并将以下内容添加到wepback.common.js

 plugins:[ ..... ..... , new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }) ] 

有关更多详细信息，请查看以下链接中的第4条评论： https ： //github.com/AngularClass/angular2-webpack-starter/issues/696

为我工作。 我曾经抱怨jquery没找到，但它解决了我的问题。

Answer 2

我想你需要告诉Webpack入口点在哪里找到bootstrap文件。

 entry: { app: './app.ts', vendor: [ 'bootstrap/dist/css/bootstrap.css' ] }