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

Posted 2023-03-06

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

【英文标题】：Can I extend external scss rule without including it in the output?

【发布时间】：2020-05-28 05:58:15

【问题描述】：

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

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

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

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

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

【问题讨论】：

不想沾沾自喜，但它不就像不做你通常做的事情那样简单，根本不@import并创建你自己的规则集在最终文件中？在我看来，您不能扩展现有规则并且不想包含现有声明。互斥逻辑。

不幸的是，我认为实现此目的的唯一方法是将 .btn 转换为扩展名 (%btn .... ) 并对其进行扩展。除此之外，也许是@use，但我个人还没有使用过这个功能，所以我不确定这是否是一个可行的选择。

我需要更多信息才能更好地了解您具体要查找的内容。我假设您将加载两个 CSS 文件...一个 Bootstrap CSS 文件和另一个包含您的 .my-button 规则的 CSS 文件。那是对的吗？而且您试图在 Bootrap 和您自己的自定义 CSS 文件中不包含冗余代码，对吗？

@inki：不，我实际上只想要我的自定义 css 文件。 IE。我不会在任何地方使用 .btn-primary 类

我同意@Chaosxmk。为什么不简单地使用 mixins 呢？以github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/… 为例。

【参考方案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);

【参考方案2】：

当你在 scss 中作为 @import 导入时，当你进行生产构建时，webpack 依赖关系图只会在顶层包含一次，因为它成为一个公共块，因为你在多个地方使用它。是的，还有一个副作用是未使用的 scss 也包括在内，因为没有完成太多的摇树。

因此它不应该影响生产构建。

【讨论】：

你确定是这样吗？我收到如下错误：component.scss exceeded maximum budget. Budget 100.00 kB was not met by 116.25 kB with a total of 216.25 kB. - 这对我来说表明您的建议没有发生。？

【参考方案3】：

我会推荐你​​使用@mixins and @include。

尽管正如您在问题中所说，您正在使用定义此规则的现有文件（可能是第三方）。将此文件中的类转换为 mixins 可能很乏味。

所以如果你打算只使用这个文件中的几个类，我建议你这样做。

你必须转弯：

.btn
/*
some cool styles
*/

进入：

@mixin
/*
cooler styles
*/

但仍然像 Sass documentation 中声明的那样做你想要的。

源代码SCSS：

@mixin reset-list 
  margin: 0;
  padding: 0;
  list-style: none;


@mixin horizontal-list 
  @include reset-list;

  li 
    display: inline-block;
    margin: 
      left: -2px;
      right: 2em;
    
  


nav ul 
  @include horizontal-list;

结果 CSS：

nav ul 
  margin: 0;
  padding: 0;
  list-style: none;

nav ul li 
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;