TypeSass - Webpack Boilerplate

A simple webpack boilerplate with Typescripts & Sass (save time with this boilerplate 🚶‍♂️)

Building and running on localhost

Install node modules

First install dependencies:

npm install

Development

To create a development build:

npm run start

Production

To create a production build:

npm run build

Sass Folder structure

Base

The base folder holds boilerplate content. It holds the styles every page of your site/project should receive.

Components

The components folder holds all your micro layout files. Your styles for buttons and navigation and similar page components.

Layout

Your macro layout files go in the layouts folder. Styles for major sections of the layout like a header or footer and styles for a grid system would belong here.

Pages

If you have styles specific to individual pages on your site, you can place them in the pages folder. For example it’s not uncommon for the home page of your site to require page specific styles that no other page receives.

Vendor

Finally the vendors folder holds 3rd party code and the main.scss file uses @import statements to include the other files.

Generating Multiple HTML Files

To generate more than one HTML file, declare the plugin more than once in your plugins array

webpack.config.js

{
  plugins: [
    new HtmlWebpackPlugin({  // Also generate a demo.html
      filename: 'demo.html',
      template: 'src/html/demo.html'
    })
  ]
}