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

Question

鉴于现有的 scss 文件定义了类似.btn {..}或.btn-primary...的规则

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

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

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

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

Answer 1

Sass 当前默认不支持此功能，@import 和 @use 规则均不支持。

\n\n

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

\n\n

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

\n\n

@import \'{ .btn, .btn-primary } from ~bootstrap\';\n\n.my-button {\n  @extend .btn\n  @extend .btn-primary\n}\n

\n\n

请注意，上面的内容并不能完全满足您的要求 \xe2\x80\x93 它仍然会导入其他两个类，但至少不会导入整个样式表。如果您仍想更进一步，您可以这样做：

\n\n

@import \'{ .btn as .my-button } from /bootstrap/_buttons.scss\';\n@import \'[variables] from /bootstrap/_variables.scss\';\n@import \'[mixins] from /bootstrap/mixins/_buttons.scss\';\n\n.my-button {\n  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);\n}\n

\n