vangie/less-themes-webpack-plugin

A webpack plugin for generating multiple themed css files from less.

Less Themes Webpack Plugin

A webpack plugin for generating multiple themed css files from less.

Installation

npm install less-themes-webpack-plugin --save-dev

Compatibility

Requires:

• webpack 4+
• node 8.5.0+

Since this library uses postcss-loader you must have a postcss.config.js in the root of your project for this plugin to work.

You also need to install Less. This way you can control exactly which version you need.

This plugin automatically adds its own loader and:

• mini-css-extract-plugin
• less-loader
• css-loader
• postcss-loader

You shouldn't need to install them or reference them in any way in your webpack config.

If you are using html-webpack-plugin, then this plugin will add a reference to the first compiled css theme file in the generated html (in the following example that would be main.light.mobile.min.css).

Usage

In your js files import less like this:

import './stylesForThisFile.less';

Param	Type	Default	Description
options	object
[options.filename]	string	"[name].min.css"	The output file name. Replaces [name] with a generated name based on the themes option. In the following example you would get four .css files: • main.light.mobile.min.css • main.light.desktop.min.css • main.dark.mobile.min.css • main.dark.desktop.min.css
[options.themesPath]	string	"''"	The base path to the theme files in options.themes.
[options.sourceMap]	boolean	false	This is passed directly into MiniCssExtractPlugin.
options.themes	object		Defines which files to import for each different theme. Can handle any amount of nesting. The file extension is not necessary in the file name if the actual file has an extension of .less. File definitions can be a string or an array of strings.
[options.themes.path]	string		Appends a directory to the current path. Can be specified at any level.
[options.themes.include]	string, array		Appends another directory to the current path. Can be specified at any level.

Example

// webpack.config.js
const ThemesPlugin = require('less-themes-webpack-plugin');

module.exports = {
   // ...
   plugins: [
		new ThemesPlugin({
			filename: '[name].min.css',
			themesPath: './themes',
			sourceMap: true,
			themes: {
				main: {
					light: {
						mobile: [
							'main/light.less'
						],
						desktop: [
							'main/light.less',
							'main/desktop.less'
						]
					},
					dark: {
						mobile: [
							'main/light.less',
							'main/dark.less'
						],
						desktop: [
							'main/light.less',
							'main/dark.less',
							'main/desktop.less'
						]
					}
				}
			}
		})
   ]
};

// The following will produce the same output:
module.exports = {
   // ...
   plugins: [
		new ThemesPlugin({
			filename: '[name].min.css',
			themesPath: './themes',
			sourceMap: true,
			themes: {
				main: {
					path: 'main',
					include: 'light',
					light: {
						mobile: [],
						desktop: 'desktop'
					},
					dark: {
						include: 'dark',
						mobile: [],
						desktop: 'desktop'
					}
				}
			}
		})
   ]
};