En un Design System que estoy trabajando actualmente, el stack consiste en: Vite, Vue, Ant Design System (Antdv) y otras librerías. Mi intención es customizar Antdv con tal de no crear nuevas clases o sobreescribir estilos sino nativamente crear la identidad gráfica, a través de custom variables de Antdv.

El proceso no fue corto y finalmente encontré la receta, la que muestro en este artículo con tal de ayudar a alguien más.

Desde ya dejo el enlace al repositorio funcional donde puedes verificar la funcionalidad.

El proceso⌗

  • Instala con NPM, Yarn o el bundler que quieras: Vite, Vue, Ant Design System Vue (no mostraré este proceso ya que asumo que sabrían como hacerlo en su proyecto actual o nuevo). Es importante que consideres utilizar la librería unplugin-vue-components la que permite que puedas importar Antdv por módulos sin tener que declararlos manualmente, sino lo hace automágicamente. Esta es la configuración recomendada para esta stack. Además, necesitarás instalas la librería Less.

Instalación original⌗

Antdv original

La configuración⌗

Aquí la receta especial. En tu archivo vite.config.(ts|js) verifica lo siguiente:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [AntDesignVueResolver(
        { importStyle: "less" }  // importante
      )],
    }),
  ],
  css: {
    preprocessorOptions: { // modifica aquí las variables de Less que necesites
      less: {
        modifyVars: {
          "primary-color": "#1DA57A",
          "link-color": "#1DA57A",
          "border-radius-base": "16px",
        },
        javascriptEnabled: true,
      },
    },
  },
});

Antdv modificado⌗

Antdv modificado

Puedes verificar todas las variables Less de Antdv en su repositorio.

Ver demo⌗