Preprocessor dependency “sass-embedded“ not found.

项目使用SCSS预处理器时出现"sass-embedded未找到"错误，原因是缺少依赖包。

---

解决方案是安装sass-embedded（推荐）或传统sass包。

---

需注意代码中$gray-light变量需正确定义。

---

安装后重启开发服务器即可解决问题。

---

新版本sass-embedded相比传统sass性能更优。

---

关联阅读推荐

在Vue项目中使用Sass的完整指南

<style scoped lang='scss'> // li 禁用样式 连续匹配类名 匹配 li.dropdown-option 且 .is-disabled li.dropdown-option.is-disabled * { // 视觉反馈：文字颜色变为灰色 ($gray-light) color: $gray-light; // 功能禁用：pointer-events: none 使禁用状态下的菜单项无法被点击 pointer-events: none; background-color: transparent; } </style>

[plugin:vite:css] Preprocessor dependency "sass-embedded" not found.

Did you install it? Trypnpm add -D sass-embedded.

这个错误是因为项目中使用了 SCSS 预处理器，但是缺少相应的依赖包。

解决方案

根据错误提示，需要安装sass-embedded依赖包：

bash

pnpm add -D sass-embedded

背景说明

1. SCSS 预处理器：你的代码中使用了 SCSS 语法（如嵌套选择器、变量$gray-light等）
2. Vite 构建工具：项目使用 Vite 作为构建工具，需要预处理器依赖来编译 SCSS
3. sass-embedded vs sass：
   • sass-embedded是基于 Dart Sass 的新版本，性能更好
   • sass是传统的 Node Sass 包（已弃用）

替代方案

如果sass-embedded安装有问题，也可以使用传统的 sass 包：

bash

# 移除可能存在的 sass-embedded pnpm remove sass-embedded # 安装 sass pnpm add -D sass

检查代码中的 SCSS 变量

你的代码中使用了$gray-light变量，确保在项目的全局样式文件中有定义，或者在当前组件中导入包含该变量的 SCSS 文件。

安装完成后，重新启动开发服务器即可解决问题。