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

Question

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

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

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

然后使用 mixin@import将所有这些样式包装在 a 中.parent-class：

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

我认为用 a 替换它是@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 {
}

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

score 0 · Accepted Answer

我发现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(...)解决问题。

1 回答 1