# web-theme-change-demo

**Repository Path**: qm1989/web-theme-change-demo

## Basic Information

- **Project Name**: web-theme-change-demo
- **Description**: web换肤方案demo
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-10
- **Last Updated**: 2022-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web换肤demo

> 当前使用`webpack-theme-color-replacer` + `css 变量补充`，但仍无法满足一些场景，`webpack-theme-color-replacer`主要处理颜色方面需求，单独使用`css 变量`无法穿透ant-design-vue变量，主要原因是因为，`less`是预处理，而`css`变量是浏览器运行时才能知道的值，`less`在经过编译时无法对`css`变量进行运算，例如`less`的函数，+、-、*、/等运算符。但次方案可以满足半数以上的场景，只有个别需要运算的无法满足。例如ant-design-vue将`@font-size-base`设置为`14px`，用这个变量进行计算得出以其他变量，如果想动态改变字体就无法通过这种方式实现。

## 学习连接

- [https://mp.weixin.qq.com/s/qnCZGSs18Fe5RFJpCQWa9A](https://mp.weixin.qq.com/s/qnCZGSs18Fe5RFJpCQWa9A)

- [https://gitee.com/iczer/vue-antd-admin](https://gitee.com/iczer/vue-antd-admin)(带有换肤方案项目)

- [https://juejin.cn/post/6844904122643120141](https://juejin.cn/post/6844904122643120141)

- [https://juejin.cn/post/7041749661404626980](https://juejin.cn/post/7041749661404626980)

- [https://juejin.cn/post/6916018667775852558](https://juejin.cn/post/6916018667775852558)

- [https://juejin.cn/post/6844903553090191368](https://juejin.cn/post/6844903553090191368)