element-ui 2.x 及 vxe-table 2.x 使用 css 定制主题

需求: 客户按照自己的需要，变更页面主题

现状：项目使用的是 element-ui 2.x 及 vxe-table 2.x

解决方案：

1. 升级 vue3，使用 element-plus + vxe-table 4.x。vue3 之后推荐使用 css 变量变更主题。肥肠方便，but。对于这个老项目来说升级的代价太重了，承担不起，pass 了。

2. element-ui 2.x 及 vxe-table 2.x 都是推荐使用 scss 生成 css 文件去使用。

   element 有提供在线主题编辑器及其 Chrome 插件，但是没啥用进去就报 500 。

而且有几个 issue 是关于这个问题的，但是没有回应，应该是已经不维护了。

也提供了命令行主题工具 element-theme 去生成，但 install 这个东西需要对 nodejs 版本有要求，还需要安装 python2 的依赖之类的，太恶心了。

基于以上原因，这里建了一个 themeGen 项目，用于在 scss 文件设定主题色，接着使用 sass 命令生成 css 文件。

项目依赖如下：

{"dependencies": {"vxe-table": "2.9.12","element-ui": "^2.15.14"},"devDependencies": {"sass": "~1.32.6"}
}

index.scss 案例如下：

// element-ui
/* 改变主题色变量 */
$--color-primary: #0283a7;
@import "./node_modules/element-ui/packages/theme-chalk/src/index";// vxe-table
@import "./node_modules/vxe-table/styles/variable.scss";
/* 改变主题色变量 */
$vxe-primary-color: #0283a7;
@import "./node_modules/vxe-table/styles/modules.scss";/* 自定义样式 */
.test-title {color: #0283a7;font-size: 18px;font-weight: bolder;
}

最后通过 sass 命令生产 css 文件：

sass ./index.scss ./index.css --no-source-map

测试前效果如下：

上传生成出来的样式文件之后，效果如下：

按以上方式实现对 nodejs 的版本要求是很宽的，测试时使用的是 22.7.0，按我的推测 8.x 以上的版本都能使用吧？有测试到的朋友可以吱一声。最后上代码，github 地址点这里。

改进：按照这个方法得到的 css 样式。其实还是固定主题的。如果能把 scss 的变量都替换成 css 变量去生成 css 样式，就能实现 vue3 的效果了。有大腿实现了吗？实现了贴评论区让大伙观摩观摩。

参考：vue2.x element-ui自定义主题 适配css var 变量换肤，真正的自由切换皮肤

© 著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务

喜欢的朋友记得点赞、收藏、关注哦！！！