如何在 Vite 配置中更改 antd 主题？

Question

是一个由Vite & React & antd组成的项目

我想在vite.config.ts中动态处理antd主题。

如果你能告诉我如何修改 React 组件中的 less.modifyVars 值，我将不胜感激。

这是当前屏幕。

light state/ dark state

在深色模式下，select组件的样式无法正常工作。

import { getThemeVariables } from 'antd/dist/theme'

...

css: {
  modules: {
    localsConvention: 'camelCaseOnly'
  },
  preprocessorOptions: {
    less: {
      javascriptEnabled: true,
        modifyVars: {
          ...getThemeVariables({
            dark: true // dynamic
          })
        }
      }
    }
  }
}

Answer 1

已经有一段时间了，但这现在对我有用：

您需要确保减少按需导入。我用插件vite-plugin-imp来实现。然后 getThemeVariables 应该可以正常工作。

import vitePluginImp from 'vite-plugin-imp';
import { getThemeVariables } from 'antd/dist/theme';

export default defineConfig({
  plugins: [
    // ...
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ],
  resolve: {
    alias: [
      // { find: '@', replacement: path.resolve(__dirname, 'src') },
      // fix less import by: @import ~
      // https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
      { find: /^~/, replacement: '' },
    ],
  },
  css: {
    preprocessorOptions: {
      less: {
        // modifyVars: { 'primary-color': '#13c2c2' },
        modifyVars: getThemeVariables({
          dark: true,
          // compact: true,
        }),
        javascriptEnabled: true,
      },
    },
  },
});

此外：您可以从这里获得更多灵感：vite-react/vite.config.ts

Answer 2

您需要导入 'antd/dist/antd.less' 而不是 'antd/dist/antd.css'
安装更少的依赖项 npm add -D less。 Vite会自动抓取。
使用以下配置：

   css: {
     preprocessorOptions:{ 
       less: {
         modifyVars: {
           'primary-color': '#1DA57A',
           'heading-color': '#f00',
         },
         javascriptEnabled: true,
       },
     },
   },

如何在 Vite 配置中更改 antd 主题？

How to change antd theme in Vite config?

reactjs

typescript

antd

vite