vue ant design 改變主題

1,引入依賴:

npm i webpack-theme-color-replacer

2,新建一個webpack插件的js :webpack_theme_plugin.js

const ThemeColorReplacer = require("webpack-theme-color-replacer");
const generate = require("@ant-design/colors/lib/generate").default;
const getAntdSerials = color => {
  // 淡化（即less的tint）
  const lightens = new Array(9).fill().map((t, i) => {
    return ThemeColorReplacer.varyColor.lighten(color, i / 10);
  });
  const colorPalettes = generate(color);
  // const rgb = ThemeColorReplacer.varyColor
  //   .toNum3(color.replace("#", ""))
  //   .join(",");
  return lightens.concat(colorPalettes).concat(color);
};
const themePluginOption = {
  fileName: "./css/theme-colors-[contenthash:8].css",
  matchColors: getAntdSerials("#1890ff"), // 主色系列
  // 改變樣式選擇器，解決樣式覆蓋問題
  changeSelector(selector) {
    switch (selector) {
      case ".ant-calendar-today .ant-calendar-date":
        return (
          ":not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)" +
          selector
        );
      case ".ant-btn:focus,.ant-btn:hover":
        return ".ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)";
      case ".ant-btn.active,.ant-btn:active":
        return ".ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)";
      case ".ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon":
      case ".ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon":
        return ":not(.ant-steps-item-process)" + selector;
      case ".ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover":
      case ".ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover":
        return ".ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover";
      case ".ant-menu-horizontal > .ant-menu-item-selected > a":
      case ".ant-menu-horizontal>.ant-menu-item-selected>a":
        return ".ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a";
      case ".ant-menu-horizontal > .ant-menu-item > a:hover":
      case ".ant-menu-horizontal>.ant-menu-item>a:hover":
        return ".ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover";
      default:
        return selector;
    }
  }
};

const createThemeColorReplacerPlugin = () =>
  new ThemeColorReplacer(themePluginOption);

module.exports = createThemeColorReplacerPlugin;


const createThemeColorReplacerPlugin = () =>
  new ThemeColorReplacer(themePluginOption);

module.exports = createThemeColorReplacerPlugin;

3,在vue.config.js中使用

const ThemeColorReplacerPlugin = require("./webpack_plugins/webpack_theme_plugin");


configureWebpack: {
    plugins: [
      ThemeColorReplacerPlugin(),
      new CompressionPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: productionGzipExtensions,
        // 只處理大於xx字節 的文件，默認：0
        threshold: 10240,
        // 示例：一個1024b大小的文件，壓縮後大小爲768b，minRatio : 0.75
        minRatio: 0.8, // 默認: 0.8
        // 是否刪除源文件，默認: false
        deleteOriginalAssets: false
      })
    ]
  }

4,創建改變主題方法 :themeColor.js

import client from "webpack-theme-color-replacer/client";
import generate from "@ant-design/colors/lib/generate";

export default {
  getAntdSerials(color) {
    // 淡化（即less的tint）
    const lightens = new Array(9).fill().map((t, i) => {
      return client.varyColor.lighten(color, i / 10);
    });
    // colorPalette變換得到顏色值
    const colorPalettes = generate(color);
    // const rgb = client.varyColor.toNum3(color.replace('#', '')).join(',')
    console.log(lightens.concat(colorPalettes).concat(color));
    return lightens.concat(colorPalettes).concat(color);
  },
  changeColor(newColor) {
    var options = {
      newColors: this.getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors`
      changeUrl(cssUrl) {
        return `/${cssUrl}`; // while router is not `hash` mode, it needs absolute path
      }
    };
    return client.changer.changeColor(options, Promise);
  }
};

5,使用:

import themeColor from "../plugins/themeColor";

 methods: {
    //改變顏色
    changeColor(color) {
      themeColor.changeColor(color).then(res => {
        console.log(res);
      });
    },
}

6,代碼更新:

因爲配置的路徑問題,導致在上線以後無法換色:

const themePluginOption = {
  fileName: "./css/theme-colors-[contenthash:8].css",