登录
首页 >  文章 >  前端

Vite 按需引入 Vant 样式差异:为什么标签组件能显示样式,而 JavaScript 表达式组件却不能?

时间:2024-12-06 21:15:54 149浏览 收藏

哈喽!大家好,很高兴又见面了,我是golang学习网的一名作者,今天由我给大家带来一篇《Vite 按需引入 Vant 样式差异:为什么标签组件能显示样式,而 JavaScript 表达式组件却不能?》,本文主要会讲到等等知识点,希望大家一起学习进步,也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧!

Vite 按需引入 Vant 样式差异:为什么标签组件能显示样式,而 JavaScript 表达式组件却不能?

vite 按需引入 vant 时样式差异的原因

当按需引入 vant 时,你会发现标签组件可以正常显示样式,但 javascript 表达式的组件却无法显示样式。这是因为:

原因:

vite 默认按需加载组件的 javascript 文件,但不加载其样式文件。标签组件可以通过模板被直接渲染,因此可以加载样式。而 javascript 表达式的组件则需要额外的步骤来加载样式。

解决方案:

有两种解决方法:

方法 1:使用 unplugin-auto-import 插件和全局注册

  • 安装 unplugin-auto-import 插件。
  • 在 vite 配置文件中启用该插件。
  • 去掉 sfc 中手动导入的 vant 组件。
  • 单独全局注册这些函数形式的组件,并手动导入它们的样式:
import { toast } from 'vant';
import { imagepreview } from 'vant';
import 'vant/es/toast/style';
import 'vant/es/image-preview/style';

app.use(toast);
app.use(imagepreview);

方法 2:引入组件样式文件

  • 手动导入 javascript 表达式组件的样式文件,例如:
import 'vant/es/cell/style';
import 'vant/es/cell-group/style';

本篇关于《Vite 按需引入 Vant 样式差异:为什么标签组件能显示样式,而 JavaScript 表达式组件却不能?》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>