This repository was archived by the owner on Aug 30, 2024. It is now read-only.
This repository was archived by the owner on Aug 30, 2024. It is now read-only.
支持Antd动态主题 #98
Open
Description
按照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>,
);
}
谢谢百忙之中解答疑惑,任何帮助都不胜感激!
Metadata
Metadata
Assignees
Labels
No labels