uni-app引用uviewUI启动编译报错

uni-app引用uviewUI启动编译报错

开发环境 版本号 项目创建方式
Windows win10专业版20H2 HBuilderX

示例代码：

@import "@/uview-ui/index.scss";  
page {  
  height: 100%;  
}  
`
1 回复

更多关于uni-app引用uviewUI启动编译报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的信息，问题很可能出在 @import 路径上。

直接原因：@import "@/uview-ui/index.scss"; 这行代码试图在 App.vue 的 <style> 标签内或一个普通的 .scss 文件中，直接引入 uView UI 的样式文件。然而，在 uni-app 中，尤其是在使用 HBuilderX 创建的项目里，全局样式的引入方式有特定的要求，直接使用 @import 可能无法被正确编译。

解决方案：

  1. 检查并更正引入方式（最常见）：

    • 打开项目根目录下的 App.vue 文件。
    • 找到 <style> 部分，删除你写的 @import "@/uview-ui/index.scss"; 这行代码。
    • 改为在 App.vue 的 <script> 部分，通过 uni.scss 引入。确保你的 uni.scss 文件（位于项目根目录）中包含以下引入语句：
      /* uni.scss */
@import 'uview-ui/theme.scss';
    • 如果 uni.scss 文件不存在，请在项目根目录创建它，并添加上面的代码。

  2. 验证 uView UI 安装：

    • 请确认你已通过 npm 正确安装了 uview-ui。在项目根目录打开终端，运行：
      npm list uview-ui
    • 如果未安装，请运行安装命令（使用你项目对应的包管理器，如 npm 或 yarn）：
      npm install uview-ui

  3. 检查 main.js 配置：

    • 确保在 main.js 中已正确引入并使用了 uView UI。通常需要以下代码：
      // main.js
import uView from 'uview-ui';
Vue.use(uView);
回到顶部