How to override bootstrap variables in sass?

Question

I was trying to customize a Bootstrap 4. I want to copy settings from _variable.scss file to _custom.scss to override. But I didn't find _custom.scss file in source code. How do I add this _custom.scss file in my project?

Solution

Bootstrap 4 is a big hit. They have completely rewritten it. So, You can override the variables very easily. Just create a _custom-variables.scss file and import it before _variables.scss file in bootstrap.scss as shown below.

Copy the variable which you want to override, paste it in _custom-variables.scss and change the value as you want. Also remove the !default attribute. Compile it again and done. The !default attribute is reverse of !important. It will take the value of previously declared variable.

Comments

[Ryan]

This part was super helpful: "The !default attribute is reverse of !important. It will take the value of previously declared variable."

[Bill Gardner]

This answer worked for me and was a much simpler solution to the one shown here: stackoverflow.com/questions/45776055/…

[JDandChips]

The !default comment has changed my life.