Sass导入循环问题处理：跨文件变量互引报错如何解决？

你遇到的循环导入问题，核心原因是两个文件互相依赖对方的变量，而Sass的@use规则不允许循环引用。解决这个问题不需要把所有变量都塞进index.sass，更合理的方案是把共享变量抽离到单独的全局变量文件，具体步骤如下：

1. 创建独立的全局变量文件 #

新建一个名为_variables.sass的局部文件（文件名前加下划线，Sass会将其视为局部模块，不会单独编译成CSS），把需要跨文件使用的变量都放在这里：

$primaryColor: blue
$titleBarHeight: 32px

2. 在业务文件中引用变量模块 #

分别在index.sass和TitleBar.sass中通过@use引入变量文件，即可直接使用所有全局变量：

修改后的index.sass #

@use './variables' as *

body:
  box-sizing: border-box
  width: 100%
  height: 100%
  padding-top: $titleBarHeight
  overflow: auto

修改后的TitleBar.sass #

@use './variables' as *

.titleBar
  position: fixed
  top: 0
  left: 0
  box-sizing: border-box
  width: 100%
  height: $titleBarHeight
  background: $primaryColor

补充说明 #

如果担心变量名冲突，也可以不用as *（将变量导入到当前作用域），而是使用命名空间调用：

// TitleBar.sass示例
@use './variables' as vars

.titleBar
  background: vars.$primaryColor

这种模块化的变量管理方式，不仅解决了循环导入问题，还能让全局变量的维护更集中、清晰，是Sass开发的标准实践。

内容的提问来源于stack exchange，提问作者François MENTEC