使用vite+react+sass+antd 配置antd样式主题

2,679 阅读1分钟

需要下载

    yarn add less
    yarn add antd

引入antd 在main.ts中

    import "antd/dist/antd.less"; //原有是antd.css  只需要改为less就可以啦

vite 官网配置 // vitejs.dev/config/

vite.config.ts配置

export default defineConfig({
  resolve: { alias: { "@": path.resolve(process.cwd(), "src") } },
  root: process.cwd(),
  server: { port: 3344, host: "0.0.0.0" },
  base: "./",
  plugins: [reactRefresh()],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          "primary-color": "#EAA516", //全局样式
        },
        javascriptEnabled: true,
      },
    },
  },
});

Antd 全局配置以及部分通用变量,可以在这里查找:

github.com/ant-design/…