Package Exports

less-themes-webpack-plugin

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

With npm

npm install less-themes-webpack-plugin --save-dev

Compatibility

Requires webpack >=4 and node >= 8.5.0. Since this library uses postcss-loader you must have a postcss.config.js in the root of your project for this plugin to work.

Usage

// 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: [
                            'light.less'
                        ],
                        desktop: [
                            'light.less',
                            'desktop.less'
                        ]
                    },
                    dark: {
                        mobile: [
                            'light.less',
                            'dark.less'
                        ],
                        desktop: [
                            'light.less',
                            'dark.less',
                            'desktop.less'
                        ]
                    }
                }
            }
        })
    ]
};

This plugin automatically adds its own loader and mini-css-extract-plugin, less-loader, css-loader, and postcss-loader.

In js import your less like this:

import './stylesForThisFile.less';

Options

`options.filename`

string, defaults to '[name].min.css'.

The output file name. Replaces [name] with a generated name based on the themes option. In this 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, defaults to ''.

The path to the theme files in options.themes.

`options.sourceMap`

boolean, defaults to false.

This is passed directly into MiniCssExtractPlugin.

`options.themes`

object, required.

Defines which files to import for each different theme. 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.

License

MIT