vue 自定义element主题色/ant主题色

element 主题色自定义思路：使用工具获取主题色的css文件并重新引入即可

安装theme包

npm i element-theme -g
npm i element-themex -g

项目安装theme-chalk开发依赖

npm i element-theme-chalk -D

初始化element-variables.scss变量文件

et -i 
// return  Generator variables file

修改element-variables.scss 默认主题并执行et 重新编译生成新的主题样式 theme 文件

main.js 入口引入theme/index.css

import "../theme/index.css"

重新运行 主题色已生效

丢弃多余的css文件并压缩index.css为index.min.css重新引入

ant 主题色自定义修改思路：修改vue.config.js文件

// 参考https://2x.antdv.com/docs/vue/customize-theme-cn#%E7%A4%BE%E5%8C%BA%E6%95%99%E7%A8%8B-for-Antd-React
{
	loaderOptions: {
	 less: {
                javascriptEnabled: true,
                modifyVars: { // ant修改主题色
                    'primary-color': '#1890ff',
                    'link-color': '#1890ff',
                    'success-color': '#52c41a',
                    'warning-color': '#faad14',
                    'error-color': '#ff4d4f',
                },
            },
	}
}