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 [email protected]

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. |