Using Bootstrap with Webpack

Question

I have an app that uses Webpack. I'm new to Webpack and trying to learn how to use it effectively. Specifically, I'm trying to import Bootstrap with Font Awesome into my project. I found this SO post, however, I am still unable to use Bootstrap. I'm not sure if it's out-of-date, or if I'm misunderstanding something.

I tried loading Bootstrap and Font Awesome via the url-loader. I was referencing the following URLs:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

I also tried using loading Bootstrap and Font Awesome via NPM and then referencing it in my entry file like this:

require('bootstrap');
require('font-awesome');

It seems like this should be part of a commonly used template. However, I'm not finding one. How do I use Bootstrap and Font Awesome with Webpack?

However, I've come up short with that approach as well.

Why don't it work require('bootstrap'); require('font-awesome'); in entry file? Do you have any errors? Can you add webpack config file? — Stanislav Mayorov
– Stanislav Mayorov, Commented Jul 5, 2017 at 19:08
@StanislavMayorov When I do require('bootstrap'); the bootstrap CSS simply does not load. I installed bootstrap using npm install bootstrap --save-dev. I can see bootstrap in the node_modules directory. I can successfully run webpack from the command-line with require('bootstrap') in my entry-file. However, the CSS simply is not loaded when I visit the web page. — user687554
– user687554, Commented Jul 6, 2017 at 14:43
You must add loaders for css and fonts in your config. And don't forget to import jquery because it needs for bootstrap. — Stanislav Mayorov
– Stanislav Mayorov, Commented Jul 6, 2017 at 21:05
@StanislavMayorov I have css-loader and url-loader in my config file. However, I do not see any font-specific loaders listed in the loaders: webpack.js.org/loaders. — user687554
– user687554, Commented Jul 7, 2017 at 14:19
Have you tried installing the npm packages for bootstrap and font awesome? npmjs.com/package/bootstrap-webpack npmjs.com/package/font-awesome-webpack That will put the files into node_modules and you should be able to import or require them. — Håken Lid
– Håken Lid, Commented Jul 8, 2017 at 13:29

Kars Barendrecht · Accepted Answer · 2019-05-10 21:06:58Z

7

+100

I have created a simple example on GitHub. Webpack 2 and Bootstrap 3 are used.

Install dependency npm install jquery bootstrap

index.js

require('bootstrap');
require('bootstrap/dist/css/bootstrap.css');
require('font-awesome/css/font-awesome.css'); //Optional. The question author uses this package.

webpack

const webpack = require('webpack');
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, "index.js"),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [    
            {
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
                use: [{
                    loader: "file-loader"
                }]
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('bundle.styles.css'),
        new webpack.ProvidePlugin({
            // inject ES5 modules as global vars
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

index.html

<link rel="stylesheet" type="text/css" href="/dist/bundle.styles.css">
<script type="text/javascript" src="/dist/bundle.js"></script>

You can use HtmlWebpackPlugin if don't want to insert bundle.styles.css and bundle.js manually.

edited May 10, 2019 at 21:06

Kars Barendrecht

54910 silver badges23 bronze badges

answered Jul 8, 2017 at 19:08

Stanislav Mayorov

4,4945 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yevgeniy Afanasyev Over a year ago

why not load less instead of css?

Stanislav Mayorov Over a year ago

@YevgeniyAfanasyev Because it will increase build time. Author didn't want to use bootstrap variables. You can use less and add less-loader if you need it.

rzb Over a year ago

Bootstrap 3 does not need tether.js. That's a Bootstrap 4 requirement.

Tripurari Shankar · Accepted Answer · 2019-05-14 06:45:25Z

1

if you are not generating your base HTML file dynamically then you can symply include a <link> tag in your base html's head section (means same base html file everywhere)

and if you want to use it using webpack then along with url-loader you need to use either style-loader and css-loader (if you want to insert the style as style tag in head witch is probabbly not the case)

or you can use webpack's extract to text plugin to load as a different file and insert it using html link tag

for reference you can use this open source project's configration file

webpack production config

and

webpack developement config

edit: link update

edited May 14, 2019 at 6:45

answered Jul 8, 2017 at 13:10

Tripurari Shankar

3,6082 gold badges19 silver badges27 bronze badges

1 Comment

BelgoCanadian Over a year ago

The links are dead

Collectives™ on Stack Overflow

Using Bootstrap with Webpack

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related