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

Question

我已经为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 入口点在哪里可以找到引导文件。

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