最新消息:iOS编程开发交流群(6906921) ,Mac.Cocoa开发交流群(7758675) 欢迎iOS/macOS开发编程爱好及学习者加入!

Vue开发之CDN引入ElementUI后修改主题色的简单方法

JavaScript 天狐 4047浏览 0评论

工程化的Vue项目cdn引入Vue.js和ElementUI方法很简单,不再赘述。

ElementUI提供的样式中,默认的主题色是一种蓝色。工程化的ElementUI主题样式一般都是用sass变量指定,比如

CDN模式下直接在index.html中引用如下css即可应用ElementUI的默认样式。

但是一般的vue项目主题色需要自己指定,然而ElementUi又没有提供配置方法。

有人可能知道,ElementUi提供了在线diy主题css的方法 主题生成工具。

这种方式能解决问题,包括下载/theme-chalk/index.css修改后工程中引用。

还有人直接把elementui源码拉了下来,改动主题色变量后编译出来引用。

但是最大的问题是css文件还是要引用到项目中。那使用cdn优化的意义是什么呢?

方案

所以我研究下了,大致思路可以是在vue项目开始访问的时候,动态的js下载/theme-chalk/index.css,脚本替换颜色变量,替换字体为绝对路径,后再append到head中,使样式生效。

以下是我调试好的工具类。

解决上线!

 

 

转载请注明:天狐博客 » Vue开发之CDN引入ElementUI后修改主题色的简单方法

微信 OR 支付宝 扫描二维码
为天狐 打赏
非常感谢你的支持,哥会继续努力!
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址