Preprocessor dependency “sass-embedded“ not found.

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

如果出现 Preprocessor dependency "sass-embedded" not found 错误：

首先检查已安装的包
bash 复制代码
# 查看 package.json
cat package.json | grep sass

# 或查看已安装的
pnpm list | grep sass
清理后重新安装
bash 复制代码
# 删除所有 sass 相关包
pnpm remove sass sass-embedded

# 只安装 sass
pnpm add -D sass

# 或者只安装 sass-embedded
pnpm add -D sass-embedded
在 Vue3 项目中， 不需要同时安装 sass 和 sass-embedded ，两者选择一个即可。

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

对于大多数 Vue 项目，建议使用标准的 sass 包而不是 sass-embedded。

对于 Vue3 项目，建议直接使用 pnpm add -D sass 即可，无需安装 sass-embedded，除非有特定的性能需求。

常见误区澄清

❌ 错误：同时安装 sass 和 sass-embedded

✅ 正确：只安装其中一个

❌ 错误：安装旧版 node-sass

✅ 正确：使用 sass（Dart Sass）

❌ 错误：不配置 vite.config.js 的预处理器选项

✅ 正确：根据需要配置 SCSS 选项

关联阅读推荐

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

css 复制代码

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

本次问题主要出在 Bootstrap 变量的导入方式。需要解决导入配置问题。

使用标准的 Dart Sass 配置步骤包括：检查依赖、创建项目结构、更新Vite配置、导入样式文件。

该方案确保所有组件能直接访问Bootstrap变量和mixins，避免"未定义变量"错误。

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

Did you install it? Try pnpm add -D sass-embedded.

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

解决方案

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

bash

bash 复制代码

pnpm add -D sass-embedded

背景说明

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

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

检查代码中的 SCSS 变量

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

$light 在 Bootstrap 中有定义，为什么还报错？

这个问题是因为 SCSS 变量的作用域问题。

虽然 Bootstrap 中定义了 $light 变量，但在组件中没有正确导入 Bootstrap 的 SCSS 变量文件。

问题原因

SCSS 变量未导入：当前组件的样式中无法访问 Bootstrap 的变量

作用域限制：SCSS 变量只在导入了定义文件的范围内有效

如果项目大量使用 Bootstrap 变量，建议在 vite.config.js 中配置全局 SCSS 导入，这样就不需要在每个组件中重复导入了。

补充：查看 Sass 版本

检查 package.json

查看 package.json 文件中的 dependencies 或 devDependencies：

javascript 复制代码

{
  "devDependencies": {
    "sass": "^1.69.0",  // Dart Sass
    // 或者
    "node-sass": "^9.0.0"  // node-sass
  }
}

关键区别：

Dart Sass ：包名是 "sass"（推荐）
node-sass ：包名是 "node-sass"（已弃用）

澄清：两个不同的包

1. sass 包 ✅

包名 : sass

当前版本: 1.97.2 (最新)

这是什么 : Dart Sass 的 JavaScript 实现

状态 : 官方推荐、活跃维护

开发者: Google

安装 : npm install sass
复制代码
{
  "devDependencies": {
    "sass": "^1.97.2"  // ✅ 这是对的！
  }
}
2. node-sass 包 ❌ (已弃用)

包名 : node-sass

当前版本: 已停止更新

这是什么 : LibSass 的 Node.js 绑定

状态 : 已弃用、不再维护

开发者: 社区维护

安装 : npm install node-sass (不要安装这个)
复制代码
{
  "devDependencies": {
    "node-sass": "^9.0.0"  // ❌ 不要用这个！
  }
}
历史演变

早期: Ruby Sass (原始版本，已淘汰)

中期:

LibSass (C++ 实现) → node-sass 包

Dart Sass (Dart 实现) → 最初是独立的

现在:

Dart Sass 成为官方标准

sass 包是 Dart Sass 的纯 JavaScript 实现

node-sass (LibSass) 已弃用 (2020年10月宣布)

如何确认你用的是正确的包

bash

bash 复制代码

# 查看已安装的包
npm list sass

# 正确输出应该是：
# project@1.0.0 /path/to/project
# └── sass@1.97.2  ✅

# 检查是否有 node-sass
npm list node-sass

# 如果没有安装会显示：
# (empty)  ✅
# 或者没有这个包

验证你的 sass 包

bash

bash 复制代码

# 运行版本检查
npx sass --version

# 如果显示类似：
# 1.97.2
# 或者
# Dart Sass 1.97.2
# ✅ 那么你用的是正确的 Dart Sass

"sass-embedded": "^1.97.2"

sass-embedded，这是 Google 开发的 嵌入式 Dart Sass 版本。它与传统的 sass 包有所不同，但同样也是 Dart Sass。

sass-embedded 是什么？

sass-embedded 是 Sass 的一个新实现，它：

使用独立的 Dart 进程来编译 Sass
性能更好，特别是对于大型项目
API 与传统的 sass 包有所不同
支持最新的 Sass 特性

切换回标准的 sass 包（推荐）

对于大多数 Vue 项目，建议使用标准的 sass 包而不是 sass-embedded：

bash

bash 复制代码

# 卸载 sass-embedded
npm uninstall sass-embedded

# 安装标准的 sass 包
npm install sass --save-dev

# 或者安装特定版本
npm install sass@1.69.0 --save-dev

为什么 sass-embedded 可能有问题？

sass-embedded 是一个相对较新的实现，可能：

与某些构建工具兼容性不够好
导入路径解析可能不同
某些插件可能还不支持新的 API

"sass": "^1.97.2"

现在使用的是标准的 Dart Sass 1.97.2。

完整的解决方案

步骤 1：确保正确的依赖

bash

bash 复制代码

# 检查已安装的包
npm list sass bootstrap

# 如果有任何问题，重新安装
npm install sass@1.97.2 bootstrap@latest

步骤 2：创建正确的项目结构

复制代码

src/
├── styles/
│   ├── _bootstrap.scss      # Bootstrap 变量和 mixins
│   ├── _variables.scss      # 自定义变量
│   └── index.scss          # 主样式文件
└── components/
    └── DropdownItem.vue

步骤 3：创建样式文件

src/styles/_bootstrap.scss：

css 复制代码

// 导入 Bootstrap 的核心文件（按正确顺序）
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// 可选：按需导入 Bootstrap 组件
// @import "bootstrap/scss/root";
// @import "bootstrap/scss/reboot";
// @import "bootstrap/scss/buttons";
// @import "bootstrap/scss/dropdown";

src/styles/_variables.scss：

css 复制代码

// 自定义变量（会在 Bootstrap 变量之后加载）
$primary: #4a6fa5;
$light: #f8f9fa;

// 覆盖 Bootstrap 的 theme-colors
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark
) !default;

src/styles/index.scss：

css 复制代码

// 主样式文件
@import "variables";
@import "bootstrap";

步骤 4：更新 Vite 配置（关键！）

javascript 复制代码

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 方法 A：使用 additionalData（推荐）
        additionalData: `
          // 导入 Bootstrap 的核心
          @import "bootstrap/scss/functions";
          @import "bootstrap/scss/variables";
          @import "bootstrap/scss/maps";
          @import "bootstrap/scss/mixins";
          @import "bootstrap/scss/utilities";
          
          // 导入自定义变量
          @import "@/styles/variables";
        `,
        
        // 或者 方法 B：只导入变量文件
        // additionalData: `@import "@/styles/variables";`
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      // 为 Bootstrap 添加别名（可选）
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
    }
  }
})

步骤 5：在 main.js 中导入样式

javascript 复制代码

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 方法 A：导入编译好的 Bootstrap CSS（简单）
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'

// 方法 B：导入自定义的 SCSS 文件（灵活）
// import '@/styles/index.scss'

createApp(App).mount('#app')

步骤 6：修复 DropdownItem.vue 组件

vue

javascript 复制代码

<template>
  <div class="dropdown-item">
    <!-- 组件内容 -->
    <slot></slot>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style lang="scss" scoped>
// 不需要再导入 Bootstrap 文件，因为已经在全局配置了
// 可以直接使用所有 Bootstrap 变量和 mixins

.dropdown-item {
  // 现在可以直接使用 $light
  color: $light;
  background-color: $body-bg;
  padding: map-get($spacers, 2);
  
  // 使用 Bootstrap mixin
  @include border-radius($border-radius);
  
  &:hover {
    background-color: $gray-100;
    @include transition($btn-transition);
  }
  
  // 使用 CSS 自定义属性（备用）
  // color: var(--bs-light);
}
</style>

这样配置后，所有 Vue 组件都可以直接访问 Bootstrap 的变量和 mixins，不会再出现 "Undefined variable" 或 "Undefined mixin" 错误。

Preprocessor dependency “sass-embedded“ not found.

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

解决方案

背景说明

检查代码中的 SCSS 变量

补充：查看 Sass 版本

检查 package.json

澄清：两个不同的包

1. `sass` 包 ✅

2. `node-sass` 包 ❌ (已弃用)

历史演变

如何确认你用的是正确的包

验证你的 sass 包

"sass-embedded": "^1.97.2"

sass-embedded 是什么？

切换回标准的 sass 包（推荐）

为什么 sass-embedded 可能有问题？

"sass": "^1.97.2"

完整的解决方案

步骤 1：确保正确的依赖

步骤 2：创建正确的项目结构

步骤 3：创建样式文件

步骤 4：更新 Vite 配置（关键！）

步骤 5：在 main.js 中导入样式

步骤 6：修复 DropdownItem.vue 组件

Preprocessor dependency “sass-embedded“ not found.

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

解决方案

背景说明

检查代码中的 SCSS 变量

补充：查看 Sass 版本

检查 package.json

澄清：两个不同的包

1. sass 包 ✅

2. node-sass 包 ❌ (已弃用)

历史演变

如何确认你用的是正确的包

验证你的 sass 包

"sass-embedded": "^1.97.2"

sass-embedded 是什么？

切换回标准的 sass 包（推荐）

为什么 sass-embedded 可能有问题？

"sass": "^1.97.2"

完整的解决方案

步骤 1：确保正确的依赖

步骤 2：创建正确的项目结构

步骤 3：创建样式文件

步骤 4：更新 Vite 配置（关键！）

步骤 5：在 main.js 中导入样式

步骤 6：修复 DropdownItem.vue 组件

1. `sass` 包 ✅

2. `node-sass` 包 ❌ (已弃用)