步骤
开发环境安装依赖
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