Vue+Vite项目中Sass BEM混入报Undefined mixin错误求助

以下是针对性的排查和解决步骤：

1. 确认混入文件的语法正确性 #

检查你的src/bem.scss文件，确保混入定义的语法完全正确，没有拼写错误或语法漏洞：

// 示例正确的BEM混入结构
@mixin b-block($block-name) {
  .#{$block-name} {
    @content;

    // 元素选择器
    &__element {
      @content;
    }

    // 修饰符选择器
    &--modifier {
      @content;
    }
  }
}

重点确认：混入名称（如b-block）的拼写、变量定义、大括号闭合情况，Sass对大小写敏感，使用时的名称必须和定义完全一致。

2. 验证组件中混入的导入方式 #

在src/App.vue中，确保正确导入了bem.scss：

• 如果是单组件导入，使用相对路径：

<style lang="scss">
// 路径要根据实际文件位置调整，确保能找到bem.scss
@import './bem.scss';

@include b-block('app-container') {
  // 你的样式代码
}
</style>

• 如果是全局注入，跳过单组件导入，直接检查Vite配置。

3. 检查Vite的全局样式配置 #

若你想全局注入BEM混入，避免每个组件都手动导入，需在vite.config.ts中正确配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 注意路径是项目根目录相对路径，确保指向你的bem.scss
        additionalData: `@import "./src/bem.scss";`
      }
    }
  }
})

配置后重启Vite服务，避免缓存导致的配置不生效。

4. 检查依赖安装情况 #

确保已经安装了sass预处理器依赖，Vite本身不内置Sass，需手动安装：

npm install sass --save-dev
# 或使用yarn
yarn add sass -D

5. 排查语法版本冲突 #

如果你的bem.scss使用了@use语法（Sass模块化新语法），注意不要和旧的@import混用，两种语法的作用域不同，可能导致混入无法识别。建议统一使用一种导入方式。

内容的提问来源于stack exchange，提问作者杜佳杰