Ruby Sass导入文件变量未定义：修改子文件编译报错问题

问题场景 #

我的文件结构与代码如下：

• scss/global/swatches.scss：

$swatch-bg: rgba(30,30,45,1);

• scss/global/panels.scss：

.panel {
    background-color: $swatch-bg;   
}

• scss/app.scss（主文件）：

@import 'global/swatches.scss';
@import 'global/panels.scss';

执行监视编译命令：

sass --watch scss:css

首次编译能正常在/css文件夹生成预期文件，但修改panels.scss时，监视器报错找不到$swatch-bg变量；只有修改并保存app.scss后，才能重新正确编译，变量解析正常。

需求：无需在每个文件重复导入变量文件，实现修改任意导入文件时都能正确编译。

解决方案 #

1. 使用局部文件命名约定（下划线前缀） #

Sass默认会把以下划线开头的文件识别为局部文件，不会单独编译它们，只会在被导入时处理。

给变量文件和依赖变量的文件添加下划线前缀：

• 重命名为scss/global/_swatches.scss
• 重命名为scss/global/_panels.scss

然后在app.scss中导入时可省略下划线与后缀：

@import 'global/swatches';
@import 'global/panels';

这样修改_panels.scss时，Sass监视器会识别它是app.scss的依赖文件，自动重新编译整个主文件，变量就能正常解析。

2. 明确指定只编译主文件（推荐） #

如果不想修改文件名，可调整watch命令，仅监视并编译主文件app.scss，而非整个scss目录：

sass --watch scss/app.scss:css/app.css

不管修改哪个导入的子文件，Sass都会触发主文件的重新编译，确保所有依赖变量被正确加载。

3. 升级到新版Sass的@use语法（现代方案） #

若使用Dart Sass 1.23+版本，推荐用@use替代@import，它的模块系统依赖关系更清晰：

修改_swatches.scss（加下划线作为局部模块）：

$swatch-bg: rgba(30,30,45,1);
@forward '.'; // 暴露变量给其他模块

修改_panels.scss：

@use '../global/swatches' as swatches;

.panel {
    background-color: swatches.$swatch-bg;   
}

app.scss中：

@use 'global/swatches';
@use 'global/panels';

这种方式下模块依赖关系显式可见，监视器能准确追踪依赖，修改任意模块都会触发正确编译。

需求可行性 #

你的需求完全可行，通过上述方法即可避免重复导入变量文件，同时保证修改任意子文件时都能正常编译。

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