Bootstrap less - override entire class

问题

I am using the Bootstrap less files. I would rather not modify them directly, since this seems to be bad practice. The only file I am editing is bootstrap.less since I need to add in override classes.

In type.less I want to modify this:

.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;
}

So I have created a new _type.less containing this:

.page-header {
  background: blue;
}

This is referenced in the main bootstrap.less file:

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

The problem I have is that the compiler outputs both classes to bootstrap.css - I want to override the original so that it only uses my implementation instead.

Is this possible?

回答1:

Don't call your less in the main bootstrap.less, call the bootstrap.less at the top of your less file.

Also you will need to overwrite every single definition in .page-header

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

来源：https://stackoverflow.com/questions/29673941/bootstrap-less-override-entire-class