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'
}
}
}
})
]
};
object
| string
| Array.<string>
themeDef : 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. |