如何解决如何在 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(...)
解决了这个问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。