引导主题——如何删除重复的样式？答案

【问题标题】：boostrap theming -- How to remove duplicate styles?引导主题——如何删除重复的样式？
【发布时间】：2020-04-22 04:22:14
【问题描述】：

这个问题与其说是代码问题，不如说是最佳实践问题。我正在开发基于https://github.com/HackerThemes/theme-kit 的自定义引导主题。我有一个我喜欢的工作主题，但是，我覆盖了原始 Bootstrap 主题中的一些样式。即使在缩小的 CSS 中，这些也是重复的。例如，Bootstrap 定义...

.btn-danger:hover {
    color: #fff;
    background-color: #ae130b;
    border-color: #a2120a;
}

...但我的代码也定义了...

.btn-danger:hover {
    border-color: #0000;
}

在最终的样式表中，这两种样式都存在。第二种样式覆盖了 Bootstrap，它看起来很好。但是，这会导致无用的代码。首先，是否有某种后处理器可以与 Gulp 一起使用来消除这些重复项并合并它们？其次，我应该直接 fork Bootstrap 存储库并直接修改原始 SCSS 吗？

【问题讨论】：

使用 SCSS，定义您想要更改的变量，并在引导之前包含它们。 bootsrap 中的每个变量都有!default 属性。这意味着它可以被覆盖。

标签： css twitter-bootstrap sass bootstrap-4 themes

【解决方案1】：

这取决于你@import。查看mytheme.scss，整个 Bootstrap SASS 被导入，在最终的 CSS 中创建了完全重复的代码。

相反，您可以pick specific SASS files to import 并查看option variables，这也会影响生成的 CSS。例如，设置$enable-grid-classes: false 将防止在生成的 CSS 中复制整个网格系统。

【讨论】：