@lingxiteam/less-theme-change-webpack-plugin

less-theme-change-webpack-plugin

Refer to the antd-theme-webpack-plugin for dynamically changing less theme and based on its own business scenarios in browser (mainly used to modify less variables).

This plugin will change the index.html file content by inserting:

• A script that contains init the window.less
• A script that import the less.js
• A link that import the less theme style file output by this plugin

Install

$ npm install -D @lingxiteam/less-theme-change-webpack-plugin

or

$ yarn add -D @lingxiteam/less-theme-change-webpack-plugin

Usage

Plugin init

const LessThemeChangePlugin = require('@lingxiteam/less-theme-change-webpack-plugin');

const options = {
  htmlFilePath: 'index.html',
  themeFileEntryPath: '',
  themeFileOutputPath: 'theme.txt', // .txt file is smaller than .less
  lessJsFilePath: 'https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js',
  replaceContentsMapping: {
    'the content of theme style file ready to be replaced': 'the new content',
  }
};

const LessThemeChangePluginIns = new LessThemeChangePlugin(options);

Coding

// for Example: modify the antd less vars
window.less.modifyVars({
  '@primay-color': '#4477ee',
  '@success-color': '#33ee33',
  // ...
});

Options

Property	Type	Default	Descript
htmlFilePath	string	index.html	The project html file path
themeFileEntryPath	string	''	The Entry of less theme style file to be bundled
themeFileOutputDir	string	''	Specify the bundled less theme style file directory for additional output
bundleThemeFileOnly	boolean	false	Only output the bundled less theme style file
bundleThemeFileName	string	theme.txt	The bundled less theme style file output to dist directory by plugin
publicPath	string	''	The publicPath must be set as the publicPath of the project, and will be reflected in the path of introducing the bundled less theme style file in HTML
lessJsFilePath	string	https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js	less.js cdn or file path
nodeModulesPath	string	''	Specify the path where the module is located (e.g. ~antd)
replaceContentsMapping	object	{}	The themeStyleFile content replace mapping { [key]: value } ( key is the replaced content, value is the new content, both are string )