Sass · Babel · Bootstrap · Webpack · Webpack Dev Server · jQuery 3.5.1 · Popper.js
This Webpack Sass Bootstrap boilerplate starter contains the features and scripts you need to get started quickly with Webpack bundling and building, Live Loading,gzip-compression and creating a dev server.
It contains the following features:
- Webpack 5 bundling
- Babel ES6 Compiler
- Sass Compiler
- Bootstrap v4
- jQuery 3.5.1
- Popper.js
- Webpack Dev Server
- Generates
gzip
of both css and js files
If you want to check out our official documentation, just click here.
It contains guidance on setting up this starter, as well as feature outlines.
This starter contains the following webpack loaders:
- Sass Loader for compiling sass (SCSS)
- File Loader for loading asset files
- HTML Loader for loading HTML files
- Babel Loader for compiling ES6 code
The following webpack plugins are also included:
- Extract Text Plugin for extracting CSS files
- Clean Webpack Plugin for cleaning unwanted files in dist directory
- HTML Webpack Plugin for generating HTML files
- Webpack Provider Plugin for providing jQuery & popper js to Bootstrap
- Glob for matching HTML files
- Please make sure you have NodeJS installed, as this contains
npm
, which is necessary for installing dependencies, starting the appropriate scripts, and building your web project.
Clone the repo:
git clone https://github.com/shaminmeerankutty/webpack-sass-bootstrap-boilerplate.git
Navigate to the project folder:
cd webpack-sass-bootstrap-boilerplate
Install all packages and dependencies required for this project:
npm install
Start the development environment (then, navigate to http://localhost:8080):
npm start
Then, open a browser and navigate to: http://localhost:8080/
Building files can be done as follows:
npm run build
-
Add your HTML files by inserting or including them in the
src
directory (By defaultindex.html
is added to yoursrc
directory, feel free to edit it and experiment with the changes live.)- Make sure you restart development server after adding new HTML files
-
Add images to your
src/assets
folder. -
Add sass (SCSS) files to
src/scss
folder.- Make sure you import the scss file in
main.scss
- Make sure you import the scss file in
@import "filename";
Code released under the MIT License.