Vue ant-design-vue antd-theme-webpack-plugin 动态改变主题

需求分析 现有方案缺陷 CSS 变量 无法支持复杂表达式 mix(var(--primary-color), #fff, 20%) 浏览器兼容性有限（ie 不支持） 多套 CSS 主题 主题样式固定，

背景 公司需求：在项目运行时支持更换主题。项目vue为3.0版本，antd版本为2.0.0，网络上关于 antd-theme-generator教程有些坑点没有写的很详细，这里记录总结一下 原理 使用

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

需求，通过button按钮实现不同主题风格的切换。实现方法：通过js动态修改scss变量。整体思路是通过声明皮肤文件，通过@mixin解析结果，通过@include在页面中调用。

之前在做网站换肤，所以今天想聊聊网站换肤的实现。网页换肤就是修改颜色值，因此重点就在于怎么来替换。 如上图，我们会看到在某些网站的右上角会出现这么几个颜色块，点击不同的颜色块，网站的整体颜色就被替换了。要实现它，我们考虑最简单的方式： 点击不同的按钮切换不同的样式表 ，如： t…

最近在网上看到 Tailwind Labs的实现的[换肤视频]，决定使用 Tailwind css 实现博客列表主题换肤。

之前说的公司需求需要把老项目上面做一键换肤。然后就开搞了呗。 这个不多说吧，不管是react还是vue，说白了就是把颜色直接写成js变量。不过这是兼容性最好的一种方案 这个也简单，直接把css用less和scss管理起来。然后用这两者的操作函数进行换肤处理 这块就是新特性了，i…

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 `flex`, `pt-4`, `text-center` 和 `rotate-90` 这样的的类，它们能直接在脚本标记语言中