Bootstrap: Bootstrap type.less file over rides custom CSS

[DavidMacDonald]

I hope version 4 SASS typography CSS file doesn't over ride custom CSS implemented by author.

[bardiharborow]

Your question is somewhat unclear. Cascading Style Sheets, by definition, override CSS included earlier in the document. To ensure that your custom CSS is not overridden you need to move Bootstrap before your custom CSS.

[cvrebert]

Yeah, this is the nature of CSS. There's no notion of precedence other than selector specificity.
If you don't like _type.scss, then your options are to modify it, delete it, or override its styles in your own CSS.

[Monduiz]

This is actually a valid point. I am loading Bootstrap first and my app css stylesheets are loaded last and I still get type.less and normalize.less override my app styles.

[cvrebert]

Selector specificity also matters, not just ordering.

[andre-koch]

@cvrebert could you be more specific please. what do you mean?

[lakshmankotipalli]

I changed my code to the below in angular.json

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles/main.scss"
            ]

And this works, I am able to override bootstrap styles with main.scss now.