使用webpack包含引导程序

Question

I'm developping a chrome extension. I use boostrap 3 for the UI.

doctype html

html
  head
    meta(charset='UTF-8')
    title (Boilerplate Popup)
    link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css")
    style.
      body { width: 500px; }

  body
    #root
    script(src=env == 'prod' ? '/js/ext.bundle.js' : 'http://localhost:3000/js/ext.bundle.js')

Here is how I was used to include boostrap.
localhost:3000 is a server created with webpack web server.

At this point everything works well and here is a screenshot :

But I don't want my chrome extension to be network dependant, so I decided to download boostrap using :

npm install boostrap which have downloaded boostrap 3. I also decided to use webpack to load boostrap.min.css.

  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        presets: ['react-hmre']
      }
    }, {
      test: /\.css$/,
      loaders: [
        'style',
        'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
        'postcss'
      ]
    },
    {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
    {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
    {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}]
  }

I didn't change the css loader (which comes from a boilerplate) but I added the loader for the web font and svg.

Finally, I've included boostrap.min.css in the javascript entry point : import 'bootstrap/dist/css/bootstrap.min.css';

Now, it's how my extension look like :

I think a part of boostrap is loaded (because the link in the second version looks like the same as the links in the first version. But obviously, the other components are not loaded.

I also use react-boostrap.

Thanks

Answer 1

My idea in the comments is right, css?module locally load boostrap. I changed the import with :

import '!style!css!bootstrap/dist/css/bootstrap.min.css';

and it works

Answer 2

For WEBPACK 2 , (ie after all the necessary dependency installs) you can include bootstrap as follows:-

1. Add css loaders in webpack.config.js

    { test: /\\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { importLoaders: 1 } } ] } 

2. Then, import bootstrap in the entry point script (ie index.js or app.js, index.js in my project)

    import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'; 

Need details!!! More details here

Answer 3

npm install bootstrap ;

And :

Adjust css loader as following :

       {
            test: /\.css$/,
            loaders: ['style', 'css'],
        }

And, import bootstrap :

import Bootstrap from 'bootstrap/dist/css/bootstrap.css';