如何编译 bootstrap scss 以仅包含扩展的类

Question

如何将自定义 bootstrap SCSS 文件编译成 CSS 文件，该文件仅包含我在自定义文件中创建的 class？

比如。我正在尝试删除添加到我的 HTML 的额外 CSS classes。

而不是写下面的HTML：

<h4 class="border-bottom p-2 mb-4">
    Blah Blah
    <span class="badge badge-secondary badge-pill float-right">100</span>
</h4>

我试图写（删除所有 class 属性）：

<h4>
    Blah Blah
    <span>100</span>
</h4>

为此，我创建了一个包含以下内容的 custom.scss 文件：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities/borders";
@import "bootstrap/scss/utilities/spacing";
@import "bootstrap/scss/utilities/float";
@import "bootstrap/scss/badge";

h4 {
    @extend .border-bottom;
    @extend .p-2;
    @extend .mb-4;
}

h4 span {
    @extend .float-right;
    @extend .badge;
    @extend .badge-pill;
    @extend .badge-secondary;
}

编译后的CSS文件包含1000多行CSS？为什么？

它包含 "badge-dark" 之类的内容，所有填充和边距内容等，我不想使用它们也不需要。如何摆脱它？我只需要一个 CSS，其中包含我在 custom.scss 文件中编写的相关 CSS 说明。

我想的结果应该是这样的：

h4 {
  border-bottom: 1px solid #dee2e6 !important;
  margin-bottom: 1.5rem !important;
  padding: 0.5rem !important;
}

h4 span {
  float: right !important;
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  h4 span:empty {
    display: none;
  }

  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
  color: #fff;
  background-color: #6c757d;

  h4 span[href]:hover, h4 span[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #545b62;
  }
}

但事实并非如此。

编辑：

如果我将 custom.scss 更改为这样的内容：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

$theme-colors: (
    "secondary":  $secondary,
);

h4 {
    border-bottom: $border-width solid $border-color;
    padding: map_get($spacers, 2);
    margin-bottom: map_get($spacers, 4);
}

@import "bootstrap/scss/badge";

h4 span {
    @include float-right;
    @extend .badge;
    @extend .badge-pill;
    @extend .badge-secondary;
}

生成的 CSS 将主要包含所需的样式。但我认为可以依赖 bootstrap classes 而不是搜索 bootstrap SCSS 并选择所需的东西并以某种方式将其合并到我的custom.scss。我以为这样会更容易？

Answer 1

您的代码有效，但您扩展的是 classes 而不是占位符。这是最大的区别，在这里。

扩展 classes 的示例（您的案例）

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

h4{
  @extend .border-bottom;
}

结果是一组 CSS 规则，因为 .border-bottom class 也存在于您的 CSS:

.border-bottom, h4 {
  border-bottom: 1px solid #dee2e6 !important;
}

与placeholder相反，情况有所不同：

%border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

h4{
  @extend %border-bottom;
}

结果如你所愿，我想：

h4 {
  border-bottom: 1px solid #dee2e6 !important;
}

我在这里找到了一篇关于这种差异的非常好的文章：http://thesassway.com/intermediate/understanding-placeholder-selectors

因此，当您导入所有这些 Boostrap4 文件时，Scss 会创建所有这些 .class 规则（为此您有 1000 多行代码）用于扩展。

然后，当你这样写时：

h4 {
    @include float-right;
    @extend .badge;
    @extend .badge-pill;
    @extend .badge-secondary;
}

您的结果将是：

h4 {
  float: right !important; /* your @include */
}

还有：

.badge-secondary, h4 {...}

.badge-pill, h4 {...}

.btn .badge, .btn h4 {...}

.badge:empty, h4:empty {...}

.badge-secondary[href]:hover, h4[href]:hover, .badge-secondary[href]:focus, h4[href]:focus {...}

.badge, h4 {...}

如何编译 bootstrap scss 以仅包含扩展的类

How to compile bootstrap scss to only contain the extended classes

css

sass

mixins

bootstrap-4

如何编译 bootstrap scss 以仅包含扩展的 类

How to compile bootstrap scss to only contain the extended classes

css

sass

mixins

bootstrap-4

如何编译 bootstrap scss 以仅包含扩展的类