https://github.com/shamin/webpack-sass-bootstrap-boilerplate

Sass, Babel & Bootstrap boilerplate with Webpack building, Dev Server and Live Loading
https://github.com/shamin/webpack-sass-bootstrap-boilerplate

babel boilerplate bootstrap-boilerplate bootstrap4 css es6 es6-javascript gzip gzip-compression jquery sass webpack webpackdevserver

Last synced: about 2 months ago
JSON representation

Sass, Babel & Bootstrap boilerplate with Webpack building, Dev Server and Live Loading

• Host: GitHub
• URL: https://github.com/shamin/webpack-sass-bootstrap-boilerplate
• Owner: shamin
• License: mit
• Created: 2017-10-25T15:48:56.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-02-02T14:44:46.000Z (over 3 years ago)
• Last Synced: 2024-05-30T12:45:11.655Z (4 months ago)
• Topics: babel, boilerplate, bootstrap-boilerplate, bootstrap4, css, es6, es6-javascript, gzip, gzip-compression, jquery, sass, webpack, webpackdevserver
• Language: JavaScript
• Homepage: https://shamin.github.io/webpack-sass-bootstrap-boilerplate/
• Size: 1.3 MB
• Stars: 96
• Watchers: 7
• Forks: 30
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        

webpack-sass-bootstrap-boilerplate




  

    

  

    

  

    

  

    

  

    

  

    





  

  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  

## Check Out Our Documentation

If you want to check out our official documentation, just click [here](https://shaminmeerankutty.github.io/webpack-sass-bootstrap-boilerplate/). 

It contains guidance on setting up this starter, as well as feature outlines.

## Features

### Webpack Loaders

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

### Webpack Plugins 

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

## Getting Started

### Requirements

* 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.

### Quick Start

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

### How To Use

* Add your HTML files by inserting or including them in the `src` directory (By default `index.html` is added to your `src` 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` 

    

```sass

    @import "filename";

```

# Licence

Code released under the [MIT License](LICENSE.md).