SCSS拆分多入口主文件实现多主题时变量未定义如何解决

你遇到的报错是Sass模块化规则的作用域限制导致的：@use 导入的变量默认仅在当前文件生效，后续通过@import引入的_main-shared.scss及其子文件无法访问这些变量，因此触发未定义报错。可根据你的项目需求选择以下任意一种修复方案：

方案1：替换入口文件的@use为@import #

旧版Sass的@import规则会把导入的变量提升到全局作用域，后续导入的所有文件都能访问，改造成本最低，不需要调整公共样式和变量文件：

// main_1.scss
@import "variables_1";
@import "main-shared";

// main_2.scss
@import "variables_2";
@import "main-shared";

方案2：用@use + with动态配置变量（兼容Sass模块化规范） #

如果你需要保留@use的模块化特性，不想降级到@import，可以通过模块配置的方式注入变量：

1. 先在_main-shared.scss顶部定义所有需要可配置的变量（给默认值即可）：

// _main-shared.scss 顶部新增
$color-primary: #000 !default;
$color-secondary: #333 !default;
// 后续原有业务代码、其他@import保持不变

2. 入口文件导入公共模块时通过with传入对应变量：

// main_1.scss
@use 'variables_1' as *;
@use 'main-shared' with (
  $color-primary: $color-primary,
  $color-secondary: $color-secondary,
  // 所有需要覆盖的变量按上述格式列全即可
);

// main_2.scss
@use 'variables_2' as *;
@use 'main-shared' with (
  $color-primary: $color-primary,
  $color-secondary: $color-secondary,
);

方案3：改用CSS自定义属性（支持运行时切换主题） #

如果后续有在页面上动态切换主题的需求，可以直接把SCSS变量替换为CSS变量：

1. 在变量文件里定义全局CSS变量：

// variables_1.scss
:root {
  --color-primary: #1890ff;
  --color-secondary: #52c41a;
}

2. 公共业务样式里直接使用CSS变量即可：

// 业务代码示例
.button {
  background: var(--color-primary);
}

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