node.js - 删除 Bootstrap 3 默认样式

Question

对于最近的一个网站，客户有 5 种不同的品牌样式颜色。因此，为了跟踪 less 文件中的所有内容(我们使用 Node 将其编译为最终的 css 文件)，我将颜色定义为 less 变量，并使用 .button-variant() mixin 来生成样式。例如

@color-cta-light: #df134d;
@color-cta-dark: #860c2f;
@color-cta-background: #fcf7fa;

.btn-cta {
    .button-variant(#ffffff, @color-cta-light, @color-cta-dark);
}

效果很好。不过，我也用面板完成了此操作，现在我得到了一个 11,000 行长的 css 文件。之所以这么长，是因为我们需要大部分默认的 Bootstrap 样式(例如 .btn 样式)以及我的自定义样式。

我想知道的是，(仅使用按钮作为示例来简单地保持它)是否有一个很好的简单方法来删除 css 中与默认 Bootstrap 按钮样式相关的行，即 btn-success、btn-warning 等。简单，我的意思是自动。我们使用 Node lessc 模块来编译 less 文件(使用 grunt 观察器)，所以我想无论需要发生什么，都会在编译后运行。

或者，我应该修改默认的 bootstrap mixins 以使其不执行任何操作，并使用我自己的自定义 mixins 吗？我觉得这应该可行，但这意味着每个新版本的 Bootstrap(当前为 3.1)需要花费一些额外的时间来确保自定义 mixin 是最新的。

我希望最终得到的是一个单一的样式表，带有来自button.less的默认按钮样式，而没有未使用的CSS的额外重载。据我了解，这是不可能的，但我希望有一些我不知道的工具可以帮助我的情况。

Answer 1

如果我理解正确的话，看看您的问题和对 Bass Jobsen 的评论，您想要保留 Bootstrap 样式，但不想保留“按钮样式”。 ”

我相信LESS (reference) feature仍然是您想要的，但只是选择性地应用。

假设您正在使用“bootstrap.less”文件，请在“buttons.less”文件之前添加引用符号，如下所示(为了简洁起见，我省略了大部分正常的“boostrap.less”文件):

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

...

// Core CSS
...
@import (reference) "buttons.less";

// Components
...

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

这将完全停用在输出 CSS 代码中生成的“buttons.less”中的所有类，但仍保留这些类可用于 mixin 目的。如果您需要该代码中的特定部分，假设您想保留基本 .btn 类，那么您必须将其添加回您的 css 中，如下所示:

.btn {
  .btn;
}

外部 .btn 将在代码中重新构造一个类，而内部 .btn 将使用引用的“buttons.less”.btn 生成代码。

以这种方式使用 (reference) 可以让您有选择地按模块删除 boostrap 的某些方面，同时保持这些方面可供 bootstrap 的其余部分以及您对其进行的任何 mixin 使用。如果您希望从模块中删除大部分代码，这可能是一个更好的方法(如果您确实想保留大部分代码，最好只保留未使用的部分，正常导入)。