SASS中‘util.$font’变量未定义错误问题求助

问题根源 #

你用@use '../util/' as u;引入整个文件夹时，SASS只会自动加载该文件夹下的_index.scss文件，不会主动加载_fonts.scss，因此无法找到$font变量。

两种可行解决办法 #

方法1：直接指定引入fonts文件 #

修改引入语句，明确加载_fonts.scss（引入时可省略文件名前的下划线）：

@use '../util/fonts' as u;

// 后续代码无需改动，u.$font可正常访问
body {
    font-family: u.$font;
}

方法2：通过文件夹入口文件统一管理 #

在util文件夹下创建_index.scss文件，添加以下内容：

// 引入fonts文件并导出所有变量
@forward 'fonts' as *;

此时你原来的@use '../util/' as u;语句可保留，u.$font能直接访问到_fonts.scss里的变量。

额外确认：确保_fonts.scss里的变量定义无语法错误，示例如下：

$font: "Arial", sans-serif;

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