如何在 SASS 中使用 @content 和 @forward 迁移使用 @content 和 @import 的案例

我正在将代码库从使用 @import 迁移到 @use 和 @forward。大部分都可以，但我不确定在 @import 与 @content 一起使用的情况下该怎么做。

考虑到以下混合，唯一的目标是在类中包装样式：

@mixin alternative-styles {
  .parent-class {
    @content;
  }
}

然后将 mixin 与 @import 一起使用以将所有这些样式包装在一个 .parent-class 中：

@include alternative-styles {
  @import 'components';
}

我认为用 @forward 替换它是行不通的，但还是以这种方式尝试一下：

@include alternative-styles {
  @forward 'components';
}

这引发了以下错误：

Error: This at-rule is not allowed here.
   ╷
22 │   @forward 'components';
     │   ^^^^^^^^^^^^^^^^^^^^^
   ╵

我发现 sass-migration 工具可以通过这种方式解决问题：

@use 'sass:Meta';
@use 'mixins';

@include mixins.alternative-styles {
  @include Meta.load-css('components');
}

components.scss 文件有多个 @forward 语句来将所有组件引用保存在一个地方，如下所示：

// components.scss
@forward 'components/buttons';
@forward 'components/text';

sass 编译器运行后会产生一个空块：

.parent-class {
}

有什么方法可以在支持 @use 和 @forward 规则的类中实现包装一堆样式吗？

我发现在创建具有相同结构的单独原型后，meta.load-css mixin 实际上确实有效：

@use 'sass:meta';
@use 'mixins';

@include mixins.alternative-styles {
  @include meta.load-css('components');
}

有关在此案例中使用 meta.load-css 的更多详细信息，请参阅此 GitHub 问题：https://github.com/sass/sass/issues/3095

我得到空 .parent-class 块的原因是因为我使用了 gulp-sass 包的异步编译。用 sass().on(...) 替换 sass.sync().on(...) 解决了这个问题。

相关问答