Less-themes-webpack-plugin NPM

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:

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.