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

daoke_li

于 2021-03-03 14:35:14 发布

阅读量1.5k

点赞数

分类专栏：前端移动开发前端文章标签： vite react rewired 按需加载 react antd-mobile

本文链接：https://blog.youkuaiyun.com/daoke_li/article/details/114312337

版权

前端同时被 2 个专栏收录

95 篇文章

订阅专栏

前端移动开发

32 篇文章

订阅专栏

本文介绍如何使用vite-plugin-babel-import插件在Vite项目中实现Ant Design Mobile组件的按需加载，自动引入对应CSS样式，并提供了解决SCSS问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤

开发环境安装依赖

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