Package Exports

less-themes-webpack-plugin
less-themes-webpack-plugin/src/Plugin.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (less-themes-webpack-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.