css - Bootstrap less - 覆盖整个类

Question

我正在使用 Bootstrap less 文件。我宁愿不直接修改它们，因为这似乎是不好的做法。 我正在编辑的唯一文件是 bootstrap.less，因为我需要添加覆盖类。

在 type.less 我想修改这个:

.page-header {
  padding-bottom: ((@line-height-computed / 2) - 1);
  margin: (@line-height-computed * 2) 0 @line-height-computed;
  border-bottom: 1px solid @page-header-border-color;
}

所以我创建了一个新的 _type.less 包含这个:

.page-header {
  background: blue;
}

这是在主 bootstrap.less 文件中引用的:

@import "type.less";
@import "../bootstrap-custom/_type.less";

我遇到的问题是编译器将这两个类都输出到 bootstrap.css - 我想覆盖原来的类，以便它只使用我的实现。

这可能吗？

Answer 1

不要在主 bootstrap.less 中调用 less，在 less 文件的顶部调用 bootstrap.less。

此外，您还需要覆盖 .page-header 中的每个定义

.page-header {
     padding-bottom: 0;
     margin: 0;
     border-bottom: none;
     background: blue;
   }