SASS动态生成嵌套CSS类失效求助（React+Craco环境）

问题背景 #

在React 18、SASS 1.62搭配Craco的项目中，尝试通过Sass混合宏动态生成嵌套CSS类，目标生成的CSS结构如下：

.root {
  &.row-cols-auto>* {
    flex: 0 0 auto;
    width: auto;
  }

  &.row-cols-1>* {
    flex: 0 0 auto;
    width: 100%;
  }
  // ... 其余row-cols-n类
}

编写的混合宏代码如下：

$grid-row-columns: 6;

@mixin create-row-cols () {
  &.row-cols-auto>* {
    flex: 0 0 auto;
    width: auto;
  }

  @for $i from 1 through $grid-row-columns {
    &.row-cols-#{$i}>* {
      flex: 0 0 auto;
      width: math.percentage(math.div(1, $i));
    }
  }
}

在.root类中调用@include create-row-cols()后无效果，硬编码对应样式正常，打包后的CSS文件中找不到混合宏生成的内容，已排查拼写问题。

解决步骤 #

1. 检查Sass编译日志，排查隐性错误 #

运行打包命令时查看终端输出，确认是否存在Sass编译报错。若使用了math模块的API，可尝试在混合宏文件顶部显式导入模块（部分环境下需手动导入）：

@use "sass:math";

确保math.div和math.percentage的调用语法正确，无参数异常（本场景中$i从1开始，可排除除数为0的问题）。

2. 验证Craco的Sass配置 #

检查craco.config.js中的Sass配置，确保Craco正确处理Sass特性（混合宏、循环等）。示例配置：

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        sassOptions: {
          quietDeps: true,
        },
      },
    },
  },
};

若配置中存在自定义的sass-loader规则，需确保未禁用Sass的核心特性。

3. 确认混合宏调用的作用域与位置 #

确保.root类的定义正确，混合宏调用在类内部，无嵌套规则覆盖：

.root {
  @include create-row-cols();
  // 其他自定义样式
}

同时检查$grid-row-columns变量是否在混合宏的作用域内，避免变量被意外覆盖或未定义。

4. 排查CSS模块化影响 #

若项目使用CSS模块化（文件命名为*.module.scss），.root类会被编译为哈希类名，混合宏生成的.row-cols-*类需用:global()包裹，避免被模块化处理。修改混合宏如下：

$grid-row-columns: 6;

@mixin create-row-cols () {
  :global(&.row-cols-auto>*) {
    flex: 0 0 auto;
    width: auto;
  }

  @for $i from 1 through $grid-row-columns {
    :global(&.row-cols-#{$i}>*) {
      flex: 0 0 auto;
      width: math.percentage(math.div(1, $i));
    }
  }
}

确保全局类名能正确匹配组件中的应用。

5. 清理缓存并重新打包 #

项目缓存可能导致旧编译结果残留，执行以下命令清理后重新打包：

rm -rf node_modules/.cache
npm run build

验证 #

完成上述步骤后，查看打包后的CSS文件，确认.root.row-cols-*>*样式已生成。在组件中正确应用类名：

<div className={`root row-cols-3`}>
  <div>列1</div>
  <div>列2</div>
  <div>列3</div>
</div>

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