Search code examples
bootstrap-4sassfrontendgulp

How to create _custom.scss to override variable in Bootstrap 4 alpha 6

I am trying to customize a Bootstrap 4 alpha 6 theme. 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

  • I noted your issue here, here and here:

    ☐ Consider implementing a _custom.scss for easier, built-in variable overrides?

    So because your Bootstrap 4 didn't ship with a _custom.scss file, you only need to re-create bootstrap/scss/_custom.scss.

    Then edit bootstrap/scss/bootstrap.scss to what it's supposed to be:

    // Core variables and mixins
@import "variables";
@import "mixins";
@import "custom";

    Then follow Customising variables

    Bootstrap 4 [supposedly] ships with a _custom.scss file for easy overriding of default variables in /scss/_variables.scss. Copy and paste relevant lines from there into the _custom.scss file, modify the values, and recompile your Sass to change our default values. Be sure to remove the !default flag from override values.