SCSS中能否通过@if判断变量值实现条件@import？报错问题如何解决？

算力阿峰

2026-4-30

如何根据SCSS变量条件导入不同主题文件

嘿，这个需求完全可以实现！你遇到的报错是因为SCSS对@import的位置有严格限制——它必须放在样式规则、混合宏这类代码的最顶层，不能嵌套在@if这样的控制指令里。不过有几种实用的办法能绕开这个限制，完美达成你的需求：

方法1：变量拼接导入路径（最直接的方案）

先通过@if给路径变量赋值，再在顶层执行导入操作，这样就符合SCSS的语法规则了：

$test: 1;

// 根据变量值确定要导入的主题路径
@if $test == 1 {
  $theme-path: "./theme1.scss";
} @else {
  $theme-path: "./theme2.scss";
}

// 在顶层执行导入，使用提前赋值好的路径变量
@import $theme-path;

这个方案的核心是把@import留在顶层，只把路径的判断逻辑抽出来，既满足了条件选择的需求，又不违反SCSS的规则。

方法2：用混合宏（Mixin）包裹主题并条件调用

如果你的主题文件可以调整结构，把主题样式封装成混合宏会更灵活：
首先修改主题文件，比如theme1.scss：

@mixin theme1 {
  // 主题1的所有样式内容
  body { background: #ff4444; }
  .btn { border-color: #ff4444; }
}

theme2.scss同理，封装成theme2混合宏。然后在主文件里：

$test: 1;

// 先导入所有主题的混合宏（全局导入不影响，未调用的mixin不会编译到最终CSS）
@import "./theme1.scss";
@import "./theme2.scss";

// 根据变量条件调用对应的主题混合宏
@if $test == 1 {
  @include theme1;
} @else {
  @include theme2;
}

这种方法适合需要动态切换主题的场景，而且后期扩展新主题也很方便，只要新增对应的mixin即可。