CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapwebpackwebpack-style-loader
ttncrch
ttncrch

Reputation: 7253

Include bootstrap using webpack

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 :

enter image description here

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 :

enter image description here

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

Upvotes: 1

Views: 5486

Answers (3)

M. Nunisa
M. Nunisa

Reputation: 91

For WEBPACK 2, (i.e. 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 (i.e 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

Upvotes: 2

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93203

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';

Upvotes: 0

ttncrch
ttncrch

Reputation: 7253

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

Upvotes: 3

Related Questions