SassBundleWebpackPlugin

Webpack plugin that lets you bundle SASS/SCSS files into one file

Getting Started

First install the package

npm install --save-dev sass-bundle-webpack-plugin

SASS/SCSS Entry File

the entry file needs to have the @imports pointing to the file using relative paths. For example: @import './button.scss';

Usage in webpack.config.js

Require the module at the top of file

const SassBundleWebpackPlugin = require('sass-bundle-webpack-plugin');

You will also need to require path

const path = require('path');

Insert a new instance of the plugin inside the plugins array

Example:

plugins: [
  new SassBundleWebpackPlugin({
		file: path.join(__dirname, 'src/index.sass'),
		type: 'sass',
		output: {
			name: 'global'
		}
	}),
],

This reads all the @imports specified inside src/index.sass and bundles them into one file at the dist folder as global.sass.

Options

file

Type: String

The path to the main SASS/SCSS file. This needs to be the main SASS/SCSS files where all the @imports are specified. The plugin will read the @imports and bundle the contents of the files specified. It will not read any style rules inside this file.

file: path.join(__dirname, 'src/index.sass')

type

Type: String

The extension of the files. Use either 'sass' or 'scss'.

type:  'sass'

output

Type: Object

Specify output options. Currently only supports name

output: {}

output.name

Type: String

The name of the final compiled file.

output: { name:  'global' }