class - Mysterious SCSS Overriding my custom.scss

Question

So I have a custom.scss file to override some bootstrap defaults. But these aren't being applied instead another color is being applied but it looks like it's from the same line of code from the same file?! That's impossible, right?

Any suggestions on where can I find this purple code to delete it? I searched the color #00242f in custom.scss but no search results. I searched in the directory to make sure there wasn't 2 X custom.scss files and it appears there is just the one. I'm pretty sure it doesn't live in custom.scss, so where does it live? Where is this coming from?

Answer 1

Here are the few points which can used to override the css from bootstrap

• Please stop making use of !important for every class this will not only make your application more complex but it will be difficult to manage and scale up your application in future.
• If you want to override the class, please create a parent class the follow the hierarchy and the override it without making use of !important Override class without using !important
• Also request you to please go through Specificity in CSS. This will be helpful in understanding which element need to placed where and get rid of !important
• As per your screenshot I can see you are using plane css in scss file though there is no harm into it, however, you are not utilising the power/features of scss. Such as @extent, @include, variables, mixing, functions, etc. Please check this SCSS Features
• Due to which your file size is becoming huge its already more than 6100 lines of code into. If we keep on overriding all the classes like this. Then it would be difficult to find and keep the correct code.
• Please break your code into small pieces in term of reusable code. Such as button.scss, background-color.scss, variables.scss and import them at the top of custom.scss file. This will make your code cleaner smaller and more dynamic
• If you are using Bootstrap 4 then please check BEM Methodology BEM for writing css classes.
• Since Bootstrap 4 is already using BEM standards for writing their default classes.