Sass编译时Mixin与Variables partial未被识别，报错求助

问题现象 #

编译Sass文件时，同目录下的_globals.scss和_header.scss可正常识别，但_variables.scss与_mixins.scss无法被检测到，终端报错：

Error: Undefined mixin.
@include breakpoint-down(medium){display: none;}

Error: Undefined variable.
color: $grayishBlue;

虽然已在_globals.scss中通过@use "variables";和@use "mixins";引入相关partial，_header.scss也引入了variables，但报错依然存在。

核心原因 #

Sass的@use规则默认是作用域隔离的：引入的变量、混合宏、函数只会存在于当前文件的局部作用域中，不会自动全局暴露，必须通过命名空间访问，或者通过特定语法取消作用域限制。

解决方案 #

方案1：使用命名空间访问（Sass官方推荐规范） #

在使用变量和混合宏时，加上对应文件的命名空间（默认是文件名）：

修改_globals.scss：

@use "variables";
@use "mixins";

html {
    font-size: 100%;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Public Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 300;
    color: variables.$grayishBlue; // 加上variables命名空间
    line-height: 1.3;
}

//Visibility
.hide-for-mobile {
    @include mixins.breakpoint-down(medium){ // 加上mixins命名空间
        display: none;
    }
}

.hide-for-desktop {
    @include mixins.breakpoint-up(large){ // 加上mixins命名空间
        display: none;
    }
}

修改_header.scss：

@use "variables";

.header {
    nav {
        padding: 24px;
        color: variables.$grayishBlue; // 加上variables命名空间
    }
}

方案2：取消作用域限制（快速适配全局使用习惯） #

如果不想每次都写命名空间，可以在引入时用as *将所有成员导入到当前作用域：

修改_globals.scss：

@use "variables" as *;
@use "mixins" as *;

// 直接使用$grayishBlue和@include breakpoint-down()，无需命名空间
body {
    color: $grayishBlue;
}

.hide-for-mobile {
    @include breakpoint-down(medium){
        display: none;
    }
}

修改_header.scss：

@use "variables" as *;

.header {
    nav {
        padding: 24px;
        color: $grayishBlue;
    }
}

方案3：用@forward统一导出（大型项目推荐） #

创建一个统一的入口partial（比如_index.scss），转发所有公共依赖：

@forward "variables";
@forward "mixins";

然后在_globals.scss和_header.scss中引入这个入口文件：

@use "index" as *; // 或保留命名空间：@use "index"; 然后用index.$grayishBlue访问

这种方式便于集中管理依赖，后续新增公共文件只需在入口中添加@forward即可。

验证步骤 #

修改完成后，重新执行编译命令：

npm run build:sass

或重启监听任务：

npm run watch:sass

检查终端是否还有报错，同时查看生成的public/css/style.css是否正常包含对应样式。

内容的提问来源于stack exchange，提问作者Kazuya