jquery - 如何将 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'
}

非常感谢任何帮助，谢谢。

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'
    })
]

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

为我工作。我曾经收到关于找不到 jquery 的投诉，但它解决了我的问题。