Sassify Webpack Plugin

Sassify Webpack is a plugin that hooks into the make process of webpack. It makes sharing variables between JavaScript/TypeScript and SCSS easy.

Prerequisite

• Node 6.x.x or higher
• NPM 3.x.x or higher

Installation

npm i -D sassify-webpack-plugin Or when using yarn yarn add sassify-webpack-plugin --dev

NPM Commands

npm run build	Create a dist folder containing the build
npm run clean	Remove the dist folder with all its contents
npm run test	Run AVA test runner
npm run cover	Get coverage details

Getting started

After installation require the Sassify plugin in your webpack config. It's recommended to only enable this plugin while running a dev-server. When building it picks up the compiled files generated by the dev server.

// Require the plugin
const SassifyWebpackPlugin = require('sassify-webpack-plugin');
// Dependency
const path = require('path');

module.exports = {
	...
	plugins: [
		new SassifyWebpackPlugin({
			files: [
				{
					source: path.resolve(__dirname, './singleExport.js'),
					dest: path.resolve(__dirname, './scss/singleExport.scss'),
				},
		]}),
	],
};

When webpack has ran include the generated SCSS file.

Configuration Options

Options: In the files array each object can have the following additional options.

mapName When generating a single export export default { ... } it's possible to assign a different mapName. By default Sassify will use the filename (e.g. colors.js -> $colors: ()).

template Sassify is using mustache for rendering templates. By default it uses 'scss-map-unquoted.mustache' found in node_modules/sassify-webpack-plugin/dist/parser/template.

Using another template can be done by:

1. Creating your own and use path.resolve to point to it.
2. Or by using predefined templates:

const SassifyWebpackPlugin = require('sassify-webpack-plugin');
const template = require('sassify-webpack-plugin/dist/template');

new SassifyWebpackPlugin({
	files: [
		{
			source: path.resolve(__dirname, './singleExport.js'),
			dest: path.resolve(__dirname, './scss/singleExport.scss'),
			template: template.SCSS_VARS,
		},
]})

parser It's possible to write a custom parser. Reference node_modules/sassify-webpack-plugin/test/fixtures/ExportFileCustom for implementation details.

Example

Input: sharedObject.js

export const mediaQueries = {
	SMALL: '(min-width: 480px)',
	MEDIUM: '(min-width: 720px)',
	LARGE: '(min-width: 1024px)',
};

// sassify-disable
export const colors = {
	starlightBlue: '#08BECD',
	lorna: '#67C5CD',
	dollarOnATrack: '#17ABB7',
	oceanStorm: '#063E54',
	weakest: '358391',
};
// sassify-enable

export const pallete = {
	ohBabe: {
		starlightBlue: '#08BECD',
		lorna: '#67C5CD',
		dollarOnATrack: '#17ABB7',
		oceanStorm: '#063E54',
		weakest: '358391',
	},
	meeting: {
		radio: '#4C6974',
		oceanBlue: '#93CCDF',
		whispy: '#E7E9E9',
		orangeYou: '#E98B53',
	},
};

Output: sharedObject.scss (Rendered using SCSS map template)

$mediaQueries: (
	SMALL: (min-width: 480px),
	MEDIUM: (min-width: 720px),
	LARGE: (min-width: 1024px),
);

$ohBabe: (
	starlightBlue: #08BECD,
	lorna: #67C5CD,
	dollarOnATrack: #17ABB7,
	oceanStorm: #063E54,
	weakest: 358391,
);

$meeting: (
	radio: #4C6974,
	oceanBlue: #93CCDF,
	whispy: #E7E9E9,
	orangeYou: #E98B53,
);

Docs

Typedoc