Question

78

Preferred way of using Bootstrap in Webpack

rated 0 times [ 81] [ 3] / answers: 1 / hits: 18877 / 8 Years ago, mon, march 21, 2016, 12:00:00

Greetings one and all,

I have been playing around with Bootstrap for Webpack, but I'm at the point of tearing my hair out. I have literally gone through loads of blog articles and they either use the 7 months outdated 'bootstrap-webpack' plugin (which, surprisingly does not work out of the box) or.. They include the Bootstrap files through import 'node_modules/*/bootstrap/css/bootstrap.css'.

Surely, there must be a cleaner and more efficient way of going about this?

This is my current webpack.config.js file:

var webpack = require('webpack');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var autoprefixer = require('autoprefixer');

var path = require('path');



module.exports = {

    entry: {

        app: path.resolve(__dirname, 'src/js/main.js')

    },

    module: {

        loaders: [{

            test: /.js[x]?$/,

            loaders: ['babel-loader?presets[]=es2015&presets[]=react'],

            exclude: /(node_modules|bower_components)/

        }, {

            test: /.css$/,

            loaders: ['style', 'css']

        }, {

            test: /.scss$/,

            loaders: ['style', 'css', 'postcss', 'sass']

        }, {

            test: /.sass$/,

            loader: 'style!css!sass?sourceMap'

        },{

            test: /.less$/,

            loaders: ['style', 'css', 'less']

        }, {

            test: /.woff$/,

            loader: url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]

        }, {

            test: /.woff2$/,

            loader: url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]

        }, {

            test: /.(eot|ttf|svg|gif|png)$/,

            loader: file-loader

        }]

    },

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: '/js/bundle.js',

        sourceMapFilename: '/js/bundle.map',

        publicPath: '/'

    },

    plugins: [

        new ExtractTextPlugin('style.css')

    ],

    postcss: [

        autoprefixer({

            browsers: ['last 2 versions']

        })

    ],

    resolve: {

        extensions: ['', '.js', '.sass'],

        modulesDirectories: ['src', 'node_modules']

    },

    devServer: {

        inline: true,

        contentBase: './dist'

    }

};

I could go and require('bootstrap') (with some way of getting jQuery in it to work), but.. I'm curious to what you all think and do.

Thanks in advance :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

damiondenzelc

Add To Favorites

Follow

Total Points: 268

Total Questions: 116

Total Answers: 116

Location: North Korea

Member since Tue, Jun 16, 2020

4 Years ago

answered 8 Years ago kaitlynnb · Accepted Answer

I am not sure if this is the best way, but following work for me well with vue.js webapp. You can see the working code here.

I have included files required by bootstrap in index.html like this:

<head>

  <meta charset=utf-8>

  <title>Hey</title>

  <meta name=viewport content=initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui>

  <link rel=stylesheet href=/static/bootstrap.css type=text/css>



  <script src=//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js></script>

  <script src=https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js integrity=sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8 crossorigin=anonymous></script>

  <script  href=/static/bootstrap.js></script>

</head>

And this works, you can execute the repo. Why I went this way was I had to customise some config in bootstrap so I had to change the variables file and build the code of bootstrap which outputted me bootstrap.js and bootstrap.cssfiles, which I am using here.

There is an alternative way suggested here by using the npm package and a webpack customisation.

First install bootstrap in your project:

npm install [email protected]

And make sure you can use sass-loader in your components:

npm install sass-loader node-sass --save-dev

now go to your webpack config file and add a sassLoader object with the following:

sassLoader: {

    includePaths: [

        path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),

    ],

},

projectRoot should just point to where you can navigate to node_packages from, in my case this is: path.resolve(__dirname, '../')

Now you can use bootstrap directly in your .vue files and webpack will compile it for you when you add the following:

<style lang=scss>

  @import bootstrap;

</style>