vite和react或许更香

安装

npm init @vitejs/app

然后选择react-ts

创建项目：

• cd projrct-name
• yarn
• yarn dev

使用antd框架

正常引入

• main.ts文件import 'antd/dist/antd.css'
• xxx.jsx使用import { Button } from 'antd' ... 然后yarn build打包发现css样式文件很大，这里是只引用了button

优化打包css资源

• 安装yarn add vite-plugin-imp -D插件
• 然后在 vite.config.js 配置文件内添加如下内容：

...
import vitePluginImp from 'vite-plugin-imp'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => `antd/lib/${name}/style/index.less`
      }
    ]
    })],
  css: {
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      }
    }
  },
  .....
})

• 安装yarn add less -D并且我们需要配置 javascriptEnabled 为 true，支持 less 内联 JS
• 删除main.ts的样式引入
• 执行yarn build可见css文件明显减小

定制主题

• 添加variables.ts文件配置覆盖antd主题 config/variables.ts

// 自定义覆盖 =============================================================
// 下面你可以各种写一些覆盖的样式，这里就简单覆盖一个主题色的样式，我们改为绿色
const primaryColor = 'green';
const themeVariables = {
    'primary-color': primaryColor
}

export {themeVariables}

• 在vite.config.ts文件中添加

import {themeVariables} from './config/variables'
...
less: {
        javascriptEnabled: true,
        // 重写 less 变量，定制样式,主题色
        modifyVars: themeVariables
      }