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 5+
• node 10+

For webpack 4 use less-themes-webpack-plugin@1.5.1

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

This library has a peer dependency of Less.

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 and loaders.
[options.skipLoaders]	boolean	false	If true then MiniCssExtractPlugin and loaders won't be added. You must provide them in your webpack config.
[options.themes]	themeDef		Defines which files to import for each different theme. If no themes are defined then a single css file will be produced named 'main.min.css'

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'
					}
				}
			}
		})
   ]
};

themeDef : object | string | Array.<string>

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.

Properties

Name	Type	Default	Description
[path]	string		Appends a directory to the current path. Can be specified at any level.
[include]	string | Array.<string>		Appends another directory to the current path. Can be specified at any level.
[isReference]	boolean	true	Imports files in this chunk as a reference. Applies to all children objects unless overridden by the child.
[*]	themeDef		Nested theme def. The key name is added to the theme name, dot delimited.