Tech Chorus

Using Sass Version Of Bootstrap With Webpack

written by Sudheer Satyanarayana on 2016-07-21

You must have gone through the webpack tutorial to understand this blog post. If you have done that, using Sass version of Bootstrap is a breeze.

In your project directory install these packages using npm.

npm install bootstrap-loader css-loader node-sass resolve-url-loader sass-loader style-loader url-loader file-loader jquery imports-loader bootstrap-sass --save-dev

Create the file webpack.config.js

'use strict';

var path = require('path');

module.exports = {
    entry: ['bootstrap-loader', './index.js'],
    output: {
        path: 'output',
        filename: 'bundle.bootstrap-sass.js'
    devtool: 'inline-source-map',
    module: {
        loaders: [
                test: /bootstrap-sass\/assets\/javascripts\//, 
                loader: 'imports?jQuery=jquery'
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
                loader: 'url'
                test: /\.scss$/,
                loader: 'style-loader!css-loader!'
        resolve: {
            extensions: ['', '.js', '.jsx', '.css', '.scss'],
            modulesDirectories: [

index.js: your project entry file.

/* Put whatever you want in your entry JS file */

index.html: Minimalist HTML file to check whether Bootstrap styles are loaded.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Minimalistic webpage</title>

    <script src="output/bundle.bootstrap-sass.js"></script>

  <body role="document">
     <button type="button" class="btn btn-primary" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>Some text</button>

Generate the build


Open index.html in your browser and you should see the web page with Bootstrap styles loaded.

Tags: sass webpack bootstrap js javascript frontend