less-themes-webpack-plugin

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

Usage no npm install needed!

<script type="module">
  import lessThemesWebpackPlugin from 'https://cdn.skypack.dev/less-themes-webpack-plugin';
</script>

README

Less Themes Webpack Plugin

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

npm deps size vulnerabilities license


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.