Theme.scss does't override bootstrap style

[sonce]

I'm submitting a...

• [ ] Bug report
• [ ] Feature request
• [ ] Documentation issue or request
• [x] Question

Current behavior

The custom css in the theme.scss does't override bootstrap css!

Expected behavior

The theme.scss will override the bootstrap styles

Environment

main.scss

`@import "theme/theme-variables";
// 3rd party libraries
@import "~bootstrap/scss/bootstrap";
// @import "~bootstrap/dist/css/bootstrap.css";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";

// Theme customization
@import "theme/theme";
@import "theme/theme-elements.scss";`

Others:

[sinedied]

It seems from your shot that you're not using the same selectors for your override, and the specificity of your selector is less than the one you're trying to override. If you use the same selector .dropdown-item it should work.

See this specificity calculator: https://specificity.keegan.st