需求: 客户按照自己的需要,变更页面主题
现状:项目使用的是 element-ui 2.x 及 vxe-table 2.x
解决方案:
-
升级 vue3,使用 element-plus + vxe-table 4.x。vue3 之后推荐使用 css 变量变更主题。肥肠方便,but。对于这个老项目来说升级的代价太重了,承担不起,pass 了。
-
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 地址点这里。