Sass技术问询：仅在主文件@use变量，无需组件文件重复引入

我正尝试使用最新版Sass，想用@use替代原有的@import语法。现有项目文件夹结构如下：

styles/
├─ main.scss
├─ _variables.scss
├─ components/
│  ├─ checkbox.scss
│  ├─ input.scss
│  ├─ radio.scss

我希望在main.scss中执行如下代码：

@use "variables" as *;

@use "components/checkbox";
@use "components/radio";
@use "components/input";

同时让checkbox.scss、radio.scss和input.scss这些组件文件无需再次声明@use "variables"，就能直接使用其中的变量。请问这是否可行？因为默认情况下似乎无法实现。

这在Sass的默认规则下不可行，因为@use的作用域是模块级别的——你在main.scss里导入的变量只会作用于main.scss本身，不会自动传递给后续通过@use引入的其他组件模块。

不过可以通过以下几种方式实现类似需求：

• 用@forward转发变量
  在components目录下创建一个_index.scss文件，内容如下：

  @forward "../variables" as *;
  @forward "checkbox";
  @forward "radio";
  @forward "input";
  

  然后在main.scss里只需要引入这个索引文件：

  @use "components" as *;
  

  这样所有组件模块都能直接使用_variables.scss里的变量，同时main.scss也能访问这些组件的样式。

• 给组件显式传递变量（推荐）
  如果你不想用转发，也可以在引入组件时通过with关键字传递需要的变量：

  @use "variables" as vars;
  @use "components/checkbox" with (
    $primary-color: vars.$primary-color,
    $border-radius: vars.$border-radius
  );
  

  这种方式更清晰，能明确每个组件依赖的变量，避免全局隐式依赖。

• 使用全局导入（不推荐）
  虽然不建议破坏模块隔离，但如果一定要让变量全局可用，可以在编译时通过Sass配置，把_variables.scss设置为全局导入文件。比如用dart-sass的话，可以通过命令行参数或构建工具（如Webpack、Vite）的Sass配置添加全局导入规则。不过这种方式会回到@import的全局作用域问题，不利于模块维护。

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