如何将Bootstrap 3添加到基于Angular2 Webpack的项目中

Question

我已经安装了jquery和bootstrap的npm包，然后将其引入vendor.ts文件中，但是在浏览器上仍然没有任何bootstrap样式显示出来。

...
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'
}

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

- Shahzad

---

你的Webpack配置是什么？ - MarkoCen

你尝试将Bootstrap放在index.html中了吗？ - KB_

@MarkoCen，您想查看配置的哪个部分？ - Shahzad

@JS_astronauts 是的，我知道那样可以。但是我正在尝试使用 vendor.js 来完成它。 - Shahzad

加载器部分，你在加载器选项中添加了 exclude: /node_modules/ 吗？ - MarkoCen

我在 less 加载器中有一个 exclude: /node_modules/，但没有排除 Bootstrap 3 所需的任何内容。 - Shahzad

Answer 1

您可以使用现有的Angular种子项目之一。例如，使用此项目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'
    })
]

要获取更多详细信息，请查看以下链接的第四条评论： https://github.com/AngularClass/angular2-webpack-starter/issues/696

对我有用。 我以前会遇到找不到jquery的问题，但是这解决了我的问题。

- kirqe

---

我一直在寻找一个简单的解决方案，终于找到了。非常感谢你！ - marquesm91

为了使js引导程序正常工作，我不得不更改ProvidePlugin元素的顺序为：[$：'jquery'，jQuery：'jquery']。 - Misi

Answer 2

我认为你需要告诉Webpack入口点在哪里找到引导文件。

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

- Trafalgar

---

我已经将我的条目对象添加到我的问题中，您能告诉我您的答案如何与我当前的情况配合工作吗？ - Shahzad