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.