如何将自定义 Bootstrap SCSS 文件编译成仅包含我在自定义文件中创建的类的 CSS 文件?
例如。我正在尝试删除添加到我的 HTML 中的额外 CSS 类。
而不是编写以下 HTML:
<h4 class="border-bottom p-2 mb-4">
Blah Blah
<span class="badge badge-secondary badge-pill float-right">100</span>
</h4>
我试图写(删除所有类属性):
<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”之类的东西,所有的填充和边距等等,我不想使用它们也不需要。如何摆脱它?我只需要一个包含我在 custom.scss 文件中编写的相关 CSS 说明的 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 类而不是搜索 Bootstrap SCSS 并选择所需的东西并以某种方式将其合并到我的 custom.scss 中。我以为这样会更容易?
最佳答案
您的代码有效,但您扩展的是类而不是占位符。这就是最大的区别。
扩展类的例子(你的情况)
.border-bottom {
border-bottom: 1px solid #dee2e6 !important;
}
h4{
@extend .border-bottom;
}
结果是一组 CSS 规则,因为 .border-bottom
类也存在于您的 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 {...}
关于css - 如何编译 bootstrap scss 以仅包含扩展类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53848175/