Bug: BEM规范提供的mixin显示未定义

[Zhao-changyuan]

Version

Vben Admin V5

Describe the bug?

BEM规范提供的mixin，在实际.vue文件中使用控制台报错[sass] Undefined mixin.

Reproduction

在apps/web-antd/views下新建页面，代码如下：

<script lang="ts" setup>
import { useNamespace, useRefresh } from '@vben/hooks';
import { MdiGithub, SvgSantaBearIcon } from '@vben/icons';

const { refresh } = useRefresh();

const { b, e, is } = useNamespace('home');
</script>
<template>
  <div :class="[b()]">
    <h1>Home page</h1>
    <button @click="refresh">刷新路由</button>

    <div>
      <span>Iconify图标</span>
      <MdiGithub class="size-10" />
    </div>

    <div>
      <span>Svg图标</span>
      <SvgSantaBearIcon class="size-12" />
    </div>

    <div>
      <span>Tailwind CSS图标</span>
      <span class="icon-[mdi--ab-testing]"></span>
    </div>

    <div>
      <h2>样式</h2>
      <div class="box">
        <div class="title">标题样式</div>
      </div>

      <div class="bg-white p-4">
        <div class="text-green-500">hello word</div>
      </div>

      <h2>BEM规范,测试</h2>
      <div :class="[e('item'), is('active', true)]">item1</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@include b('home') {
  color: black;

  @include e('item') {
    background-color: black;

    @include is('active') {
      background-color: red;
    }
  }
}
</style>

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 7.21 GB / 31.92 GB
  Binaries:
    Node: 22.13.0 - D:\software\nodejs\node.EXE
    Yarn: 1.22.22 - D:\software\nodejs\yarn.CMD
    npm: 10.9.2 - D:\software\nodejs\npm.CMD
    pnpm: 9.15.4 - D:\software\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.70)
    Internet Explorer: 11.0.26100.1882

Relevant log output

ERROR  11:02:50 [vite] Internal server error: [sass] Undefined mixin.                                
         11:02:50
   ╷
3  │ ┌ @include b('home') {
4  │ │   color: black;
5  │ │
6  │ │   @include e('item') {
7  │ │     background-color: black;
8  │ │
9  │ │     @include is('active') {
10 │ │       background-color: red;
11 │ │     }
12 │ │   }
13 │ └ }

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.