17

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?

SUNGRAIZ FARYAD
  • 489
  • 1
  • 4
  • 8

1 Answers1

31

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. enter image description here

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.

SUNGRAIZ FARYAD
  • 489
  • 1
  • 4
  • 8
  • 4
    This part was super helpful: "The !default attribute is reverse of !important. It will take the value of previously declared variable." – Ryan May 07 '18 at 16:56
  • This answer worked for me and was a much simpler solution to the one shown here: https://stackoverflow.com/questions/45776055/how-to-extend-modify-customize-bootstrap-4-with-sass/49070142#49070142 – Bill Gardner May 30 '19 at 17:11
  • The !default comment has changed my life. – JDandChips Jun 24 '21 at 13:40