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.
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 email@example.com
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
Now that we have all of our dependencies we can go ahead and start setting up our project.
I’m going to set up a folder for source files and a folder for destination files, so our project will look like this:
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:
app.js which will be dropped in the
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.
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:
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
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.
_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:
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)
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!