ant-design-vue 动态主题 css前缀变更

由于项目需要变更css 缀所以需要执行以下代码

lessc --js --modify-var="ant-prefix=custom" ant-design-vue/dist/antd.variable.less modified.css

但是执行文案之后的css 就不能通过变量修改颜色等其他主题相关的配置
通过查阅各种资料终于找当了相关方法
这个地方主要是 lessc --modify-var 命令的运用

 lessc --js --modify-var="ant-prefix=course-map" --modify-var="@base-primary=#D6AA56" --modify-var="@border-radius-base=4px"  node_modules/ant-design-vue/dist/antd.variable.less modified2.css

这个地方有个小坑,光网上的给的一些公共变量修改以后只是修改一些组件的颜色,并不是全局的,这里可以通过查看源码然后找到相应的全局变量然后统一修改

动态修改全局主题

npm install -D webpack-theme-color-replacer/client

新建一个theme.js

/* eslint-disable @typescript-eslint/no-var-requires */
const client = require('webpack-theme-color-replacer/client'); // 替换颜色对象
const { generate } = require('@ant-design/colors'); // 提取ant-design的颜色
const theme = {
  color: '#D6AA56', //  '#D6AA56'
  mode: 'dark',
  success: '#52c41a', // 成功色
  warning: '#faad14', // 警告色
  error: '#f5222f' // 错误色
};
function getAntdColors(color) {
  return generate(color);
}
function getThemeColors(color) {
  const _color = color || theme.color;
  const replaceColors = getAntdColors(_color);
  return replaceColors;
}
//  动态修改颜色方法
function changeThemeColor(newColor) {
  const promise = client.changer.changeColor({
    newColors: getThemeColors(newColor)
  });
  return promise;
}
// 初始化颜色
function modifyVars(color) {
  const _color = color || theme.color;
  const palettes = getAntdColors(_color);
  const primary = palettes[5]; // ;'#ff00ff'
  return {
    'border-radius-base': '5px',
    'btn-border-radius-base': '5px',
    'border-radius-sm': '2px',
    'table-border-radius-base': '2px',
    'bg-color': '#f2f2f2',
    'primary-color': primary,
    'btn-primary-color': '#fff',
    'text-color': '#333333', // 主文本色
    'text-color-secondary': '#666666', // 次文本色
    'success-color': theme.success,
    'warning-color': theme.warning,
    'error-color': theme.error,
    'processing-color': primary,
    'ant-prefix': 'course-map'
  };
}
module.exports = {
  getThemeColors,
  changeThemeColor,
  modifyVars
};

在vue.config.js 中配置

const { getThemeColors, modifyVars } = require('./src/utils/theme');
const ThemeColorReplacer = require('webpack-theme-color-replacer');
//配置less loader 
  css: {
    // 是否分离css true:分离css,会造成css无法热更新,false:会把css打包进js中,js一更新css自然更新
    extract: process.env.NODE_ENV !== 'development',
    sourceMap: false,
    loaderOptions: {
      less: {
        // 配置全局css变量 或者 在css文件中添加
        globalVars: {},
        modifyVars: modifyVars(),
        javascriptEnabled: true
      }
    }
  },
 configureWebpack() {
    const config = {
      plugins: [
        openGzip(),
       
        new ThemeColorReplacer({
          fileName: 'css/theme-colors-[contenthash:8].css', // 输出css文件名,支持[contenthash]和[hash]。
          matchColors: getThemeColors(), // 用于提取 css 文件的颜色数组,支持 rgb 和 hsl。
          injectCss: true // 将 css 文本注入 js 文件,不再需要下载 `theme-colors-xxx.css`
        })
      ]
    };
    if (IS_OPEN_PREVIEW_PLUGIN) {
      config.plugins.push(previewBuild());
    }
    return config;
  },

在页面中使用

import { changeThemeColor } from '@/utils/theme';
changeThemeColor(data.primaryColor);
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值