css - 我可以扩展外部 scss 规则而不将其包含在输出中吗？

Question

鉴于存在定义规则的现有 scss 文件，例如.btn {..}or .btn-primary...

我想通过扩展现有规则来声明我自己的规则

.my-button {
  @extend .btn
  @extend .btn-primary
}

没有在我生成的css文件中实际包含.btnand类？.btn-primary

通常我需要@import exiting.scss，但这包括我的 css 输出中文件中的所有规则。

标签： csstwitter-bootstrapsassbootstrap-4

Answer 1

Sass 目前默认不支持这个，@import 和 @use 规则也不支持。

尽管如此，如果您（可以）在您的项目中使用 npm 包（npm / yarn），那么node-sass-magic-importer可能会为您派上用场。

在您的示例中，您可以执行以下操作：

@import '{ .btn, .btn-primary } from ~bootstrap';

.my-button {
  @extend .btn
  @extend .btn-primary
}

请注意，上面的内容不会完全符合您的要求——它仍然会导入其他两个类，但至少不会导入整个样式表。如果你还想更进一步，你可以这样做：

@import '{ .btn as .my-button } from /bootstrap/_buttons.scss';
@import '[variables] from /bootstrap/_variables.scss';
@import '[mixins] from /bootstrap/mixins/_buttons.scss';

.my-button {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}