vite+react+antd-mobile实现类似react-app-rewired的按需加载

步骤

开发环境安装依赖

yarn add -D vite-plugin-babel-import

修改vite.config.js

import vitePluginImport from 'vite-plugin-babel-import'
……
plugins: [
    reactRefresh(),
    vitePluginImport([
      {
        libraryName: 'antd-mobile',
        libraryDirectory: 'es',
        style(name) {
          return `antd-mobile/lib/${name}/style/index.css`
        },
      },
    ])
  ]

分析

上述在plugins里面加上按需导入的功能，让导入组件模块时自动导入对应的css，如下：

import { Button } from 'antd-mobile';

        ↓ ↓ ↓ ↓ ↓ ↓

import Button from 'antd-mobile/es/button';
import 'antd-mobile/es/Button/index.css';

如果好用，大家可以给项目vite-plugin-babel-import点个赞：https://github.com/0ahz/vite-plugin-babel-import

其他

如果scss不好用，请安装sass到开发环境，无需再安装node-sass了

yarn add -D sass