Import order not allowing overrides

[rayronvictor]

I'm trying to override the .has-error .form-control in bootstrap/less/forms.less.

my_styles/theme/_forms.less:

.has-error {
  .form-control-validation(...);
}

But it seems that the bootstrap-webpack is importing my style first and then importing the bootstrap styles. The generated css looks like:

// my style
.has-error .form-control {...}
...
// bootstrap style
.has-error .form-control {...}

Indeed, you are importing the bootstrap.config.less first.

[gowravshekar]

bootstrap.config.less is designed to override bootstrap variables - https://github.com/gowravshekar/bootstrap-webpack#bootstrapconfigless

[maiers]

To make this crystal clear, use:

1. bootstrap.config.less to overwrite bootstrap variables like @brand-primary
2. Add css-selector overwrites like .navbar-brand into a separate style file. If you add them to bootstrap.config.less you will loose those changes as they will be overwritten by the original bootstrap css-selectors. This is especially dangerous, as all css-selectors you add to bootstrap.config.less which have no definition in bootstrap will work.

It took me a couple hours to realize this limitation fact, so maybe this post help others to find the flaw in their mental model earlier than I was able to.