devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ant-design-vue切换主题+换肤+自定义换肤+less动态换肤_ant-design-vue 在线换肤

作者：我家自动化 | 2024-02-18 16:01:01

赞

踩

ant-design-vue 在线换肤

换肤核心思路：

  1. 用lessjs动态改变皮肤变量
  2. window.less.modifyVars(
  3. {
  4.     "primary-color": "red",
  5. })

ant换肤的思路：

用vue文件流，读取ant的样式，然后写到一个新的less文件中，然后再把自己的less加到最终的less文件，然后引用这个大文件就行了

安装依赖

npm i antd-theme-generator --save

main.js 引用ant的less样式

  1. //引入Antd
  2. import Antd from 'ant-design-vue';
  3. import "ant-design-vue/dist/antd.less";

 换肤的核心代码结构

 theme.js

  1. const fs = require("fs");
  2. const path = require('path');
  3.  
  4.  
  5. const { generateTheme } = require('antd-theme-generator');
  6. const options = {};
  7. //生成的theme.less文件的位置
  8. const outputFilePath = path.join(__dirname, '../../../static/theme.less');
  9. //自定义样式
  10. const cusCssFilePath = path.join(__dirname, '../cus-theme.less');
  11.  
  12. generateTheme({
  13.   //node_modules中antd的路径
  14.   antDir: path.join(__dirname, '../../../node_modules/ant-design-vue'), 
  15.   //styles对应的目录路径,需要和下面的variables.less在一个文件夹
  16.   stylesDir: path.join(__dirname, '../'), 
  17.   //less变量的入口文件，variables.less里面定义的变量，必须在themeVariables里面定义
  18.   varFile: path.join(__dirname, '../variables.less'), 
  19.   //您要动态更改的变量列表
  20.   themeVariables: ['@primary-color', '@header-item-hover-color', '@header-back-color'], 
  21.   outputFilePath: outputFilePath,
  22.   customColorRegexArray: [/^color\(.*\)$/],
  23. })
  24.   .then(res => {
  25.     console.log('配置主题成功');
  26.     //自定义样式与ant主题样式合并
  27.     //读取提取过的ant样式
  28.     const themeCss = fs.readFileSync(outputFilePath).toString();
  29.     //读取自定义的CSS
  30.     const cusCss = fs.readFileSync(cusCssFilePath).toString();
  31.     fs.writeFileSync(outputFilePath, themeCss + cusCss);
  32.     //重新覆盖themeCss
  33.     console.log(`
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/108989?site
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。