从@import迁移到@use时，如何处理动态主题下的全局SCSS变量？

针对你遇到的多主题场景下，mixin无法静态导入主题变量的问题，以下是几种实用的解决方式：

1. 动态主题入口+@forward #

创建一个统一的主题入口文件，构建时动态替换该文件内容以指向不同主题，mixin通过引用这个入口间接获取主题变量：

• 先创建主题入口文件 _theme-entry.scss，构建阶段根据当前主题需求，将其内容替换为对应主题的转发语句：

  // 构建时动态生成，比如指向primary主题
  @forward "theme/primary";
  

• 主题文件示例（theme/_primary.scss）：

  $bg: #ffffff;
  // 其他主题变量...
  

• mixin文件中引用主题入口：

  // mixin.scss
  @use "theme-entry" as theme;
  
  @mixin bg {
    background: theme.$bg;
  }
  

这种方式通过统一入口实现主题动态切换，mixin无需关心具体主题来源。

2. @use with 变量传递 #

在项目主入口文件中动态加载主题，再通过@use ... with将变量传递给mixin：

• mixin文件中定义默认变量，允许外部传入覆盖：

  // mixin.scss
  $bg: null !default;
  
  @mixin bg {
    background: $bg;
  }
  

• 主入口文件（main.scss），构建时动态导入对应主题并传递变量：

  // 构建时根据主题动态引入，比如primary主题
  @use "theme/primary" as *;
  
  // 引入mixin并传入主题变量
  @use "mixin" with ($bg: $bg);
  

这种方式将变量控制权交给主入口，mixin只负责使用变量，适配动态主题场景。

3. 改用CSS自定义属性（变量） #

将SCSS主题变量替换为CSS自定义属性，利用其运行时可动态修改的特性，彻底摆脱SCSS静态导入的限制：

• 主题文件中定义CSS变量：

  // theme/primary.scss
  :root {
    --bg-color: #ffffff;
    // 其他主题变量...
  }
  

• mixin直接使用CSS变量：

  // mixin.scss
  @mixin bg {
    background: var(--bg-color);
  }
  

• 构建时动态导入对应主题文件即可，甚至支持运行时通过JS切换主题（修改:root下的CSS变量）。

这种方式不仅适配动态构建场景，还能实现更灵活的前端主题切换。

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