tdesign-theme-webpack-plugin

A webpack plugin designed to generate color palette and override the default styles of the tdesign light theme.

Install

• npm install -D tdesign-theme-webpack-plugin

const path = require('path')
const ThemeWebpackPlugin = require('tdesign-theme-webpack-plugin');

const options = {
  tdDir: path.join(__dirname, './node_modules/tdesign-vue'),
  varFile: path.join(__dirname, './src/styles/override-styles/variables.less'),
  stylesDir: path.join(__dirname, './src/styles/override-styles'),
  themeVariables: ['@brand-color']
}

const themePlugin = new ThemeWebpackPlugin(options);
// in config object
  plugins: [
    themePlugin
  ]

Add this plugin in plugins array.

Property	Type	Default	Descript
tdDir	string	-	This is path to tdesign directory in your node_modules
indexFileName	string	index.html	File name of your main html file, in most cases it is index.html which is default
generateOnce	boolean	false	Everytime webpack will build new code due to some code changes in development, this plugin will run again unless you specify this flag as true which will just compile your styles once
varFile	string	path.join(tdDir, "./esm/_common/style/web/_variables.less")	This is path of the variables file
stylesDir	string	path.join(__dirname, "./src/styles")	This is path of your override styles directory
themeVariables	Array	['@brand-color']	The array of the palettes which will be overrides based on the color you write in the varFile. Available values: ['@brand-color', '@warning-color', '@success-color', '@error-color']

If you `index.html` file is not being generated by build process then add following code in your `index.html` or whatever is the name of html main file and add `indexFileName: false` in options. This way you can better place your below script in your html file according to your needs.

<script> window.less = { async: false, env: 'production' }; </script> ```