当前位置：首页 > news >正文

【汇客项目】：在启动过程中报错本来安装的是node-sass 被卸载后安装的sass ，代码中一部分出现问题

news 2025/9/2 8:58:21

报错信息

请帮我分析一下这个问题： ERROR Failed to compile with 2 errors 下午12:27:43error in ./src/views/indexHome/businessRankingList.vue?vue&type=style&index=0&id=a5c9eda8&lang=scss&scoped=trueSyntax Error: SassError: expected selector. ╷ 89 │ } │ ^ ╵ src\views\indexHome\businessRankingList.vue 89:2 root stylesheet@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/indexHome/businessRankingList.vue?vue&type=style&index=0&id=a5c9eda8&lang=scss&scoped=true 4:14-491 15:3-20:5 16:22-499 @ ./src/views/indexHome/businessRankingList.vue?vue&type=style&index=0&id=a5c9eda8&lang=scss&scoped=true @ ./src/views/indexHome/businessRankingList.vue @ ./src/views sync ^./.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.1.7:80&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.jserror in ./src/views/indexHome/saleRankingList.vue?vue&type=style&index=0&id=3c016c76&lang=scss&scoped=trueSyntax Error: SassError: expected selector. ╷ 94 │ } │ ^ ╵ src\views\indexHome\saleRankingList.vue 94:2 root stylesheet@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/indexHome/saleRankingList.vue?vue&type=style&index=0&id=3c016c76&lang=scss&scoped=true 4:14-487 15:3-20:5 16:22-495 @ ./src/views/indexHome/saleRankingList.vue?vue&type=style&index=0&id=3c016c76&lang=scss&scoped=true @ ./src/views/indexHome/saleRankingList.vue @ ./src/views sync ^./.*$ @ ./src/store/modules/permission.js @ ./src/store/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.1.7:80&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

根据错误信息分析，这两个Vue组件文件中的SCSS样式代码存在语法错误。错误提示 SassError: expected selector 表示在SCSS代码中，编译器期望找到一个选择器，但遇到了其他内容（在这个案例中是 }）。

一：错误分析

错误发生在以下两个文件：

./src/views/indexHome/businessRankingList.vue 第89行
./src/views/indexHome/saleRankingList.vue 第94行

错误类型：SCSS语法错误

错误原因：在SCSS代码中，可能存在以下几种情况之一：

多余的闭合大括号 }
缺少选择器的样式块
SCSS嵌套语法错误

解决方案

1. 检查businessRankingList.vue文件

打开 ./src/views/indexHome/businessRankingList.vue 文件，定位到样式部分，检查第89行附近的代码：

// 检查类似这样的错误代码：
.some-class {color: red;
} // 这个是正确的// 但可能存在类似这样的错误：
} // 多余的闭合括号// 或者缺少选择器的代码块：
{color: red;
}

2. 检查saleRankingList.vue文件

同样地，打开 ./src/views/indexHome/saleRankingList.vue 文件，检查第94行附近的SCSS代码。

3. 常见错误模式

以下是几种常见的会导致此错误的代码模式：

/* 错误示例1：多余的闭合括号 */
.parent {.child {color: red;}
} // 这里可能多了一个括号
}/* 错误示例2：空的样式块 */
.parent {.child {color: red;}} // 这里可能有多余的大括号/* 错误示例3：缺少选择器 */
.parent {{color: red;}
}

4. 修复步骤

打开对应的Vue文件
找到 <style lang="scss" scoped> 部分
检查报错行附近的代码结构
确保每个开括号 { 都有正确对应的选择器
确保每个闭括号 } 都有对应的开括号
删除任何多余的括号或空的样式块

5. 预防措施

为避免类似问题，可以：

使用支持SCSS语法检查的编辑器（如VSCode）并安装相关插件
在保存文件时自动格式化SCSS代码
使用ESLint和stylelint等工具进行代码检查

修复完成后重新运行项目应该就能解决编译错误。

二：错误分析

根据您提供的 saleRankingList.vue 文件内容和之前的编译错误，我发现了一个明显的 SCSS 语法问题。

发现的问题

在文件末尾的样式部分：

<style lang="scss" scoped>.sale-rank-list {width: 100%;height: 100%;padding-left: 20px;box-sizing: border-box;}/deep/ .el-table th {padding: 10px 0 !important;}
</style>

问题分析

错误在于 /deep/ 选择器的使用方式。在 SCSS 中，/deep/ 是一个特殊的深度选择器，但在您使用的 Vue 和 SCSS 版本中，这种写法会导致语法错误。

从之前的错误信息看，第94行（也就是这个样式块的最后）报告了 expected selector 错误，这是因为 SCSS 编译器无法正确解析 /deep/ 的位置和用法。

解决方案

将 /deep/ 选择器改为标准的写法：

<style lang="scss" scoped>
.sale-rank-list {width: 100%;height: 100%;padding-left: 20px;box-sizing: border-box;
}::v-deep .el-table th {padding: 10px 0 !important;
}
</style>

或者使用 SCSS 的嵌套写法：

<style lang="scss" scoped>
.sale-rank-list {width: 100%;height: 100%;padding-left: 20px;box-sizing: border-box;
}::v-deep {.el-table th {padding: 10px 0 !important;}
}
</style>