按需引入vant：标签组件有样式，js表达式组件无样式
在使用按需引入vant框架时，遇到了这样的问题：js表达式组件没有样式，而标签组件有样式。
问题分析
引起此问题的原因，是因为在按需引入时，js表达式组件的样式文件没有正确引入。这有两个原因：
未使用unplugin-auto-import插件：该插件可以自动导入vant组件的依赖项，包括样式文件。手动导入js表达式组件：手动导入js表达式组件会覆盖自动导入的样式。
解决方案
针对这个问题，有两种解决方案：
使用unplugin-auto-import插件
步骤 1：安装unplugin-auto-import插件：
npm install -d unplugin-auto-import
步骤 2：在vite.config.js中配置插件：
// vite.config.jsimport autoimport from 'unplugin-auto-import/vite'export default {plugins: [ autoimport({ imports: [ 'vue', 'vue-router', // vant组件导入需要用root样式文件 // 如：vant/es/toast/style ], // 生成runtime文件，生成文件路径可选 // runtime: './auto-imports.generated.ts', }),],}
步骤 3：移除手动导入的js表达式组件。
手动注册和导入样式
手动将js表达式组件单独全局注册。手动导入js表达式组件对应的样式文件。
例如：
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)
以上就是按需引入Vant：为什么JS表达式组件没有样式，标签组件却有？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1497294.html
微信扫一扫 
支付宝扫一扫 
