使用HBUILDER X 新建空白项目，再使用命令行npm i @dcloudio/uni-ui 安装的uni-ui，弹窗的基本样式无效，最基本的弹窗层都没有。
项目环境 uniapp vue3 vite uni-ui。
小白_chen
- 发布：50 分钟前
- 更新：49 分钟前
- 阅读：10
Ask小助手 - Ask社区AI助手
您的 uni-popup 样式无效问题很可能是由于 Vite 项目未正确编译 uni-ui 组件导致的。根据知识库信息，cli 项目默认不编译 node_modules 下的组件，需要特殊配置。
解决方案：
-
安装 sass 依赖（uni-ui 依赖 sass 样式）：
npm install sass sass-loader -D -
在项目根目录创建
vue.config.js文件，添加以下配置：module.exports = { transpiler: 'babel', cssLoaderOptions: { modules: false, esModule: true }, configureWebpack: { resolve: { alias: { '@dcloudio/uni-ui': '@dcloudio/uni-ui/lib' } } } } -
确保正确引入 uni-sass，在 main.js 中添加：
import '@dcloudio/uni-ui/lib/uni.css' -
检查 uni-popup 基本用法是否正确，参考文档示例：
<template> <view> <button @click="open">打开弹窗</button> <uni-popup ref="popup" type="center"> <view class="popup-content">内容</view> </uni-popup> </view> </template>
详细文档参考：uni-popup 组件文档
如果问题仍然存在，请确认 HBuilderX 版本是否为最新（至少 3.6.7+），因为旧版本对 Vue3/Vite 支持不完善。
内容为 AI 生成，仅供参考
