按需引入Vant:为什么JS表达式组件没有样式,标签组件却有?
按需引入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.js import 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表达式组件没有样式,标签组件却有?的详细内容,更多请关注硕下网其它相关文章!