// ...
import viteAntdTheme, { ThemeEntry, AntdThemeOptions } from 'vite-plugin-antd-theme';

// 从1.1.0之后，不提供该配置会默认导出antd提供的暗黑、默认及紧凑主题到src/config中。
const themesEntry: Array<ThemeEntry> = [
  // 暗黑主题
  {
    entryPath: [
      path.resolve(__dirname, './node_modules/ant-design-vue/lib/style/themes/dark.less'),
      // v1.1.3版本后支持传入多个变量路径
      // 比如项目中自定义的less变量
      // 该功能由于读取变量时没有读取import的内容。
      path.resolve(__dirname, './src/styles/dark.less')],
    outputName: 'dark',
    outputPath: './src/config'
  },
  // 默认主题
  {
    entryPath: './src/styles/vars.less',
    outputName: 'light',
    outputPath: './src/config'
  },
  // 紧凑主题
  {
    entryPath: './node_modules/ant-design-vue/lib/style/themes/compact.less',
    outputName: 'compact',
    outputPath: './src/config'
  },
  // ...其他自定义主题
];

const options: AntdThemeOptions = {
  themesEntry,
  // 是否提取全部变量，默认false，优先级低于设置themeVariables
  allVariables: true,
  // 以下是antd-theme-generator配置项
  antdDir: path.join(__dirname, './node_modules/ant-design-vue'),
  stylesDir: path.join(__dirname, './src'),
  varFile: path.join(__dirname, './src/styles/vars.less'),
  themeVariables: [],
  outputFilePath: path.join(__dirname, './public/static/color.less')
  customColorRegexArray: [/^fade\(.*\)$/]
};

export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    // ...
    plugins: [
      // ...
      viteAntdTheme(options)
    ],
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true
        }
      }
    }
  };
};

index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vite-plugin-antd-theme</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <!--必须将引用放在最后，否则生成的主题会被其他覆盖-->
    <link rel="stylesheet/less" type="text/css" href="/static/color.less" />
    <script src="/static/libs/less.min.js"></script>
  </body>
</html>

App.tsx(App.vue?)

// ...
import { defineComponent } from 'vue';
import 'ant-design-vue/dist/antd.less';
import darkVars from '@/config/dark.json';

export default defineComponent({
  mounted() {
    window.ddd = () => {
      window['less'].modifyVars(darkVars).then(console.log);
    };
  },
  setup() {
    return () => <span>嗯嗯</span>;
  },
});

// 测试

window.ddd();

更新说明

2021-05-27 v1.1.0

从该版本开始默认支持导出 antd 三种主题配置文件到 src/config 目录下

Keywords

vite

antd

theme

FAQs

What is vite-plugin-antd-theme?

Is vite-plugin-antd-theme popular?

Is vite-plugin-antd-theme well maintained?

Package last updated on 21 Jul 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

vite-plugin-antd-theme