Reactjs导入:已找到@SassError循环

// 不好的例子
.container {
  .header {
    .title {
      // 过深的嵌套
    }
  }
}

// 好的例子
.container {
  .header-title {
    // 合理的嵌套
  }
}

// 错误的递归混合
@mixin recursive($n) {
  @if $n > 0 {
    color: red;
    @include recursive($n - 1);
  }
}

// 正确的递归混合
@mixin recursive($n) {
  @if $n > 0 {
    color: red;
    @include recursive($n - 1);
  } @else {
    color: blue; // 终止条件
  }
}

// fileA.scss
@import 'fileB';

// fileB.scss
@import 'fileA'; // 循环引用

// 解决方法：重构文件结构或使用@use代替@import

// styles.scss
@mixin loop-mix {
  color: red;
  @include loop-mix; // 无限循环
}

body {
  @include loop-mix;
}

// styles.scss
@mixin loop-mix($count) {
  color: red;
  @if $count > 0 {
    @include loop-mix($count - 1);
  } else {
    color: blue; // 终止条件
  }
}

body {
  @include loop-mix(3); // 设置一个合理的循环次数
}