Sass @use导入顺序问题：如何仅引入Mixin而不提前加载样式？

我有以下SCSS文件：

tokens.scss #

.text-center {
  text-align:center;
}

.bold {
  font-weight: bold;
}

@mixin text-style-1 {
  font-size: 1.2rem;
  font-weight: bold;
}

component/card.scss #

@use "../tokens.scss" as tokens;

.card {
  @include tokens.text-style-1;
  border: 1px solid #333333;
}

index.scss #

// import components
@use "component/card.scss";

// import tokens
@use "tokens.scss";

编译index.scss时，我希望tokens.scss的样式在组件样式之后引入，但由于组件中使用@use引入了tokens.scss的mixin，它总是提前导入，不符合index.scss中定义的顺序。

请问能否仅引入tokens.scss中的mixin，而不提前导入所有样式？或者能否定义@use的导入顺序？

目前我仅能通过将index.scss中的@use替换为@import解决，但这会导致样式重复，并不理想。

1. 无法单独引入mixin而忽略全局样式 #

@use的机制是只要引入文件，就会执行该文件内所有顶层代码（包括类选择器、变量等），没有办法只提取mixin而跳过其他样式输出。这是Sass模块化设计的固有特性，确保依赖模块的完整性。

2. 无法自定义@use的导入顺序 #

Sass会自动处理依赖优先级：当A文件@use了B文件，编译时B的内容必然优先于A输出，和入口文件里的书写顺序无关。所以你在index.scss里先写组件再写tokens的顺序，会被依赖关系覆盖，tokens的样式还是会提前输出。

最优解决：拆分tokens文件 #

把全局样式和mixin/工具类代码分开，分成两个独立文件，从根源上解决依赖和输出顺序的矛盾：

_mixins.scss（下划线开头表示局部文件，不会被单独编译）

@mixin text-style-1 {
  font-size: 1.2rem;
  font-weight: bold;
}

tokens.scss（仅保留全局样式）

.text-center {
  text-align:center;
}

.bold {
  font-weight: bold;
}

component/card.scss（仅引入mixin文件）

@use "../_mixins.scss" as mixins;

.card {
  @include mixins.text-style-1;
  border: 1px solid #333333;
}

index.scss（按需求顺序导入）

// 先导入组件样式
@use "component/card.scss";
// 再导入全局样式
@use "tokens.scss";

这样编译后，CSS输出顺序就是.card在前，.text-center、.bold在后，完全符合需求，同时不会出现样式重复问题。

补充说明 #

如果不想拆分文件，也可以尝试用@forward配合hide指令选择性暴露内容，但本质上还是会执行原文件的所有代码，全局样式依然会提前输出，不如拆分方案清晰易维护。

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