如何在不包括所有 CSS 的情况下 @import 而只包括 @extends

Question

我正在使用带有 bootstrap-stylus 的手写笔。这是我的app.styl代码

@import "../../node_modules/bootstrap-stylus/lib/bootstrap.styl";
section
    @extend .row

在我运行 gulp 之后，我注意到完整的 bootstrap css 包含在目标 app.css 中。我想使用 @extend 动态包含 .row rule。我想要得到的是这个..

section { //.row rules
    zoom: 1;
    margin-left: -20px;
}

可能吗？我错过了什么？ SASS 可以吗？

Answer 1

AFAIK stylus 和 sass 都不支持仅导入文件的某些选择器。但是，如果您可以控制导入的文件，则可以使用 SASS placeholder selectors 而不是 classes/ids。占位符选择器是某种抽象选择器，默认情况下不呈现任何内容。

/* _partial.scss */
%some-selector {
  prop: value;
}
%another-selector {
  prop: value;
}

/* main.scss */
@import 'partial';
.some-class {
  @extend %some-selector;
}

导致未扩展的占位符选择器被忽略（在本例中 %another-selector）

/* output.css */
.some-class {
  prop: value;
}

如何在不包括所有 CSS 的情况下 @import 而只包括 @extends

How to @import without including all CSS but just the @extends ones

css

twitter-bootstrap

sass

gulp

stylus