Scss 从@import 迁移到@use 和 meta.load-css 的问题

Question

我所拥有的简化示例：

main.scss

.a {
  .b {
    .c {
      .d {
         @import "_other";
      }  
    }
  }
}

_other.scss

&.d2 {
  ...
}

显然这工作正常。

但是当尝试迁移到 @use 或 @include meta.load-css 时，我收到以下错误：

顶级选择器不能包含父选择器“&”

迁移此代码的最佳方法是什么？

Answer 1

我的固执己见的答案是始终将部分包含在 mixin 中，以防止 CSS 在您不要求（使用 @include）的情况下被突然渲染。

// ----------------
// _foo.scss
// ----------------
@mixin foo {
  .a {
    .b {
      .c {
        .d {
           @content
        } 
      }
    }
  }  
}

// ----------------
// _bar.scss
// ----------------
@mixin bar {
  &.d2 {
    ...
  }
}


// ----------------
// main.scss
// ----------------
//
// Import partials
//
@use './reset' as *;
@use './typography' as *;
@use './foo' as *;
@use './bar' as *;


//
// Assemble
//
@include reset;
@include typography; 
@include foo {
  @include bar;
}

如果 _bar.scss 与 _foo.scss 密切相关（例如，为了使其更具可读性），您也可以直接包含它（那么只有 foo 必须包含在 assemble 文件）

// ----------------
// _foo.scss
// ----------------
@use './bar' as *;
@mixin foo {
  .a {
    .b {
      .c {
        .d {
           @include bar;
        } 
      }
    }
  }  
}

Scss 从@import 迁移到@use 和 meta.load-css 的问题

Scss issue migrating from @import to @use and meta.load-css

sass