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

Question

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

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

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

这是当前的屏幕。

亮色状态 / 暗色状态

在暗模式下，选择器组件的样式不能正常工作。

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

...

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

- Chad.K

---

请澄清您的具体问题或提供额外的细节，以准确突出您所需的内容。目前的描述不够清晰，很难确定您在询问什么。 - Community

Answer 1

1. 你需要导入 'antd/dist/antd.less' 而不是 'antd/dist/antd.css'
2. 安装less依赖 npm add -D less。Vite会自动捕获它。
3. 使用以下配置：

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

- Yauhen

---

这个完美地运行了！但是，在我的情况下，我使用的是 antd 4.x，所以我不得不安装 less 3.x。 - Jose Andrés

Answer 2

有一段时间没更新了，但是现在这个方法对我来说有效：

你需要确保按需引入less。我使用插件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。

- Yuns

---

当链接到您自己的网站或内容（或与之相关的内容）时，您必须在答案中披露您的关联，以便它不被视为垃圾邮件。在用户名中具有与 URL 相同的文本或在个人资料中提及它不被 Stack Exchange 政策视为充分披露。 - cigien

@cigien感谢您提醒我们的政策。现在也许可以了吧？ - Yuns

通过上述方法，切换深色和浅色主题比较困难。 - Chad.K

@Chad.K 你想在运行时更改主题吗？也许你可以尝试这个：https://ant.design/docs/react/customize-theme-variable - Yuns

我正在尝试使用这个来更改变量，但它根本不起作用。 - SalahAdDin

@SalahAdDin 你应该确保正确导入 antd less。 - Yuns