如何将Bootstrap 3添加到基于Angular2 Webpack的项目中 [英] How to add bootstrap 3 to Angular2 webpack based project

问题描述

我已经为jquery&安装了npm软件包.引导程序，然后将导入内容添加到vendor.ts中，但是我仍然没有在浏览器中显示任何引导程序样式.

I have installed the npm packages for jquery & bootstrap, and then added imports into vendor.ts, but I still don't have any bootstrap styling showing up on the browser.

...
import 'jquery/dist/jquery.js'

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

我也尝试过在webpack.common.js中添加另一个条目，但这也无济于事.

I have also tried adding another entry within webpack.common.js, but that didn't help either.

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

非常感谢您的帮助.

推荐答案

您可以只使用可用的有角种子项目之一. 例如，这个 https://github.com/preboot/angular2-webpack

You can just use one of the available angular seed projects. For example this one https://github.com/preboot/angular2-webpack

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

to install bs, just run npm install jquery bootstrap --save

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

then add the following to 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

For more details check 4th comment from the following link: https://github.com/AngularClass/angular2-webpack-starter/issues/696

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

worked for me. I used to get complains about jquery not found but it solved my problem.

这篇关于如何将Bootstrap 3添加到基于Angular2 Webpack的项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！