Bootstrap 3 and Webpack

My time spent learning Laravel recently has forced me to take a look at webpack. Laravel uses webpack as the frontend tool of choice for compiling javascript and css files. Laravel ships with an abstraction on top of the tool called Laravel Mix that takes care of some of the configuration and makes the process a little easier. Having used it a little bit I became curious about implementing webpack in a couple of smaller projects independently.

I decided to start with something simple–jquery and bootstrap, but quickly found that even something that simple was not as simple as it would appear. After some searching and some comparisons I was able to make something work. I’m going to detail what I found, since I wasn’t able to find a lot out there that was complete and simplified.

It should be pointed out that there good instructions for Bootstrap 4 and Webpack supplied by Bootstrap, so my focus is going to be on Bootstrap 3.

Installation

I’m still using npm for my project package management, so my instructions will be accordingly. After your setup your project, you will need to install webpack:

npm install webpack webpack-cli

We will then need to install the resources for webpack to load:

npm install bootstrap@3 bootstrap-sass jquery@1.12.4

This will give us the resources we need to load jquery, bootstrap, and the bootstrap sass files.

In order to compile and load our sass we will also need some loaders for webpack:

npm install --save-dev css-loader node-sass postcss-loader sass-loader style-loader autoprefixer

Configuration

Now that we have all of our dependencies we can go ahead and start setting up our project.

Folder Configuration

I’m going to set up a folder for source files and a folder for destination files, so our project will look like this:

project folder
- dist/
- node_modules/
- src/
  - js/
  - sass/
- package-lock.json
- package.json

To the main project folder we are going to create a config file for webpack that we will name webpack.config.js which will look like this:

This will configure webpack to compile the sass files that we will be adding and it will compile our javascript and export it to a file named app.js which will be dropped in the dist folder.

Javascript Configuration

We are going to want to use webpack to compile our javascript and our sass and load both onto a demo page. In our src/js folder we are going to create a file named index.js which will be our entry point. We will want the file to look like this:

This file will add jquery to the window object and load bootstrap, bootstrap-sass, and our compiled sass files.

Sass Configuration

Now that we have all that in place, we will turn our attention to the src/sass folder. We are going to create three files:

src/sass
- _custom.scss
- _variables.scss
- app.scss

Our app.scss file will be our entry point for Sass and will pull in all of our different sass files. It will look like this:

This file requires a little explanation–which is lacking in a lot of other explanations. This file will pull in sass files from node_modules/bootstrap-sass/.

According to the bootstrap-sass project website:

bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.

This is important because if you look at the bootstrap package in node_modules/bootstrap, you will see that there aren’t any sass files present–which is why we needed this package. That appears to have changed for bootstrap 4.

This file is copied from node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss and we are going to use it to include our own variables file instead so that we can customize how bootstrap looks.

Our _variables.scss file then is going to be copied from node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss and is going to look like this:

This will have all of your variables for bootstrap which you can customize to your heart’s content. In this example, I’ve changed the background color so that we can verify that our compile is working.

This just leaves our _custom.scss file which I’ve included to load any other custom css after the rest of the bootstrap imports have occurred. For demo purposes the contents right now look like:

.starter-template {
  margin-top: 50px;
}

HTML Configuration

We are going to need to want to load this on a page! So in our dist folder we will create an index.html page with the following content:

This will give us a menu, load our script, and give us a small container to work with (I’ve grabbed it from bootstrap here)

Compile

Now that all of our pieces are in place, we are ready to compile! To compile with webpack we will run:

npx webpack --config webpack.config.js

This should have put a file named app.js in our dist folder and if we load our page in a browser we should see a starter template with a blue background!

Conclusion

Webpack is an awesome tool for compiling Javascript and Sass and loading it in our projects. I hope that it will make this particular setup a little bit easier and encourage you to explore more of Webpacks benefits.