Bootstrap CSS Style Override

sage
1

Hi guys,

so for custom CSS I’ve been using /styles/common/_variables.scss extensively, but I had to use !important to override some of the default Bootstrap styles.

I’m not a fan of !important and I rather wouldn’t use it at all.

Anyway, I took a look at /styles/common/main.scss and variables are still imported before the main _bootstrap.scss, so the load ordering seems correct, but somehow Bootstrap’s CSS is still seen as a priority.

Can you shed a light on your own workflow and how do you mostly override Bootstrap’s styles? :smile:

Thanks so much!

2

What cases need you to override with !important? Normal priority rules should work, like accuracy on selector:

ul li {} has priority over li {}

3

Lots of them, few examples with the usual styles:

a, a:visited, a:hover font .navbar .container .nav>li>a .navbar-static-top ...everything related to buttons

These are just few at the moment. Is this approach usual or not?

4

You must to declare this selectors in other files , not in _variables.scss. Maybe you can try common/_global.scss

_variables.scss is only for variables.

_variables.scss is imported before than../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss" file to main.scss. So, every selector there will be overwritten.

5

That did it, thanks so much!