Skip to content
This repository has been archived by the owner on Aug 30, 2024. It is now read-only.

支持Antd动态主题 #98

Open
defpis opened this issue Oct 12, 2022 · 0 comments
Open

支持Antd动态主题 #98

defpis opened this issue Oct 12, 2022 · 0 comments

Comments

@defpis
Copy link

defpis commented Oct 12, 2022

按照Antd的文档实现动态主题,需要引入antd/dist/antd.variable.min.css,如果不引入我发现ConfigProvider配置无效,我查看了一下这个文件体积有500kb+,这部分的样式是否可以按需导入?

我的配置如下:

vite.config.js

import { defineConfig } from 'vite';
import { fileURLToPath } from 'url';
import react from '@vitejs/plugin-react';
import { createStyleImportPlugin, AntdResolve } from 'vite-plugin-style-import';

export default defineConfig({
  plugins: [
    react,
    // createStyleImportPlugin({
    //   resolves: [AntdResolve()],
    // }),
  ],
  esbuild: {
    jsxFactory: '_jsx',
    jsxFragment: '_jsxFragment',
    jsxInject: 'import { createElement as _jsx, Fragment as _jsxFragment } from "react"',
  },
  css: {
    preprocessorOptions: {
      // Antd使用less作为css预编译器
      less: {
        javascriptEnabled: true,
      },
      scss: {
        additionalData: `
          @import "src/styles/_variables.scss";
        `,
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('src', import.meta.url)),
    },
  },
});

main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './styles/global.scss';
import { ConfigProvider } from 'antd';

const rootElem = document.querySelector('#root');

if (rootElem) {
  const root = createRoot(rootElem);

  ConfigProvider.config({
    theme: {
      primaryColor: '#ff0000',
    },
  });

  root.render(
    <StrictMode>
      <ConfigProvider>
        <App />
      </ConfigProvider>
    </StrictMode>,
  );
}

谢谢百忙之中解答疑惑,任何帮助都不胜感激!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant