如何在与Webpack捆绑的Angular 1应用程序中使用Bootstrap

Question

I am trying to use Bootstrap in an Angular 1 app which relies on bundled JS and CSS. Here is my current webpack.config.js:

var webpack = require('webpack');

module.exports = {
  context: __dirname + '/src/assets/app',
  entry: {
    app: './app.module.js',
    vendor: [
      'angular',
      'jquery',
      'bootstrap/dist/css/bootstrap.css',
      'bootstrap'
    ]
  },
  output: {
    path: __dirname + '/src/assets/jsBundles',
    filename: 'app.bundle.js'
  },
  target: 'web',
  node: {
    fs: 'empty'
  },
  devtool: 'eval',
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js'
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ['html-loader']
      }, {
        test: /\.css$/,
        use: ['css-loader']
      }, {
        test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
        use: ['url-loader']
      }
    ]
  }
};

My Angular app successfully loads, but when I attempt to use any Bootstrap components or CSS they do not work. No errors appear, but the Bootstrap styles are not applied and no Bootstrap JS like dropwdown or modal functionality works. When I look in vendor.bundle.js I see all the Bootstrap JS, CSS, and fonts in there. Do I need to do something client-side to "load" Bootstrap?

Answer 1

Try defined "window.jQuery": "jquery" as well in the ProvidePlugin .

For reference you can refer the webpack.config.js & webpack.common.config.js in link or can refer the starter kit for Angular 1.x and Webpack

Answer 2

Since you are using html-loader and css-loader. You can include css in the js file itself,just insert require('bootstrap/dist/css/bootstrap') or import(if es6) css file in the javascript file which is using the styles. No need to provide an entry point to webpack for css

There are many possible ways to do above one is simple method,you can follow detailed webpack styles insertion here