使用11ty编译Sass时@use指令失效，变量未定义问题求助

问题背景 #

按照11ty官方文章《Minimum Static Site Setup with Sass》配置环境，package.json配置如下：

{"name": "project","version": "0.1.0","description": "SASS compile|autoprefix|minimize and live-reload dev server using Browsersync for static HTML","main": "public/index.html","author": "5t3ph","scripts": {"build:sass": "sass  --no-source-map src/sass:public/css","copy:html": "copyfiles -u 1 ./src/*.html public","copy": "npm-run-all --parallel copy:*","watch:html": "onchange 'src/*.html' -- npm run copy:html","watch:sass": "sass  --no-source-map --watch src/sass:public/css","watch": "npm-run-all --parallel watch:*","serve": "browser-sync start --server public --files public","start": "npm-run-all copy --parallel watch serve","build": "npm-run-all copy:html build:*","postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"},"dependencies": {"autoprefixer": "^10.4.2","browser-sync": "^2.27.7","copyfiles": "^2.4.1","cssnano": "^5.0.17","npm-run-all": "^4.1.5","onchange": "^7.1.0","postcss-cli": "^9.1.0","sass": "^1.49.8"}}

编写的Sass文件结构及内容：

• src/sass/helpers/_variables.scss：

//* GRADIENT COLOR */
$--gradient-1: linear-gradient(180deg, hsla(270, 5%, 7%, 0) 0%, hsla(270, 5%, 7%, 0.8) 65%, hsl(270, 5%, 7%) 100%);
$--gradient-2: linear-gradient(180deg, hsla(260, 5%, 12%, 0) 0%, hsla(260, 5%, 12%, 0.8) 65%, hsl(260, 5%, 12%) 100%);

//* TYPOGRAPHY */
$--ff-nunito-sans: "Nunito Sans", sans-serif;

• src/sass/base/_reset.scss：

@use '../helpers/variables' as *;
html {
    font-family: $--ff-nunito-sans;
    font-size: 10px;
    scroll-behavior: smooth;
}

body {
    background-color: $--background;
    color: $--on-background;
    font-size: $--body-3;
    overflow: hidden;
    // height: 300vh;
}

• src/sass/_index.scss：

@forward './base/reset';
@forward './helpers/variables';

• src/sass/style.scss：

@use '../sass' as *;

编译时出现错误：

[Browsersync] File event [change]: public\css\style.css
Error: Undefined variable.
╷
57 │ font-family: $--ff-nunito-sans;
│ ^^^^^^^^^^^^^^^^^
╵
src\sass\base_reset.scss 57:18 @forward
src\sass_index.scss 1:1 @use
src\sass\style.scss 1:1 root stylesheet.

更新Sass到最新版本后问题依然存在，以下是排查方向与解决方法：

错误原因分析 #

1. @forward顺序错误：_index.scss中先导出了依赖变量的reset模块，此时变量模块未被加载，导致reset中的变量无法识别。
2. @use路径错误：style.scss中的@use '../sass'路径不符合实际文件结构，导致无法正确导入模块。
3. 未定义变量存在：_reset.scss中使用的$--background、$--on-background、$--body-3未在_variables.scss中定义。

解决方案 #

1. 调整@forward加载顺序 #

修改src/sass/_index.scss，先导出变量模块，再导出依赖变量的reset模块，确保变量提前被加载：

@forward './helpers/variables';
@forward './base/reset';

2. 修正style.scss的@use路径 #

根据实际文件结构调整路径：

• 如果style.scss位于src/sass/目录下，应引用当前目录的index模块：

@use './index' as *;

• 如果style.scss位于src/目录下（与sass文件夹同级），则路径改为：

@use './sass' as *;

3. 补全未定义变量 #

在src/sass/helpers/_variables.scss中添加缺失的变量定义（根据需求修改值）：

//* GRADIENT COLOR */
$--gradient-1: linear-gradient(180deg, hsla(270, 5%, 7%, 0) 0%, hsla(270, 5%, 7%, 0.8) 65%, hsl(270, 5%, 7%) 100%);
$--gradient-2: linear-gradient(180deg, hsla(260, 5%, 12%, 0) 0%, hsla(260, 5%, 12%, 0.8) 65%, hsl(260, 5%, 12%) 100%);

//* TYPOGRAPHY */
$--ff-nunito-sans: "Nunito Sans", sans-serif;

//* COLORS */
$--background: #ffffff;
$--on-background: #333333;

//* TYPOGRAPHY SIZES */
$--body-3: 1.4rem;

或者直接删除_reset.scss中未使用的变量相关属性，避免报错。

4. 验证文件命名与路径 #

确保所有被引用的局部Sass文件都以下划线_开头（如_reset.scss、_variables.scss），入口文件（如style.scss）不需要下划线。同时检查所有@use/@forward的路径与实际文件结构完全匹配。

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