如何@import 不包括所有CSS，只包括@extends

【问题标题】：How to @import without including all CSS but just the @extends ones如何@import 不包括所有CSS，只包括@extends
【发布时间】：2023-03-21 11:02:01
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： css twitter-bootstrap sass gulp stylus

【解决方案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;
}

【讨论】：

刚刚发现.. 手写笔确实有占位符选择器$some-selector { prop: value; } /* main.scss */ @import 'partial'; .some-class { @extend $some-selector; }