7

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?

Rajib Kumar Bhowmik
  • 135
  • 1
  • 2
  • 8
  • You need to create file and add custom variable inside file. – Nikhil Thombare May 16 '17 at 13:34
  • If you accept an answer, then I can flag [this](https://stackoverflow.com/questions/46505841/how-to-override-bootstrap-variables-in-sass/47486673#47486673) as a duplicate. – Leo Nov 27 '17 at 14:13
  • bootstrap-4.3.1 After experimenting with _custom.scss for a while I've found it easier to just edit _variables.scss. Merging of the old and the new versions after bootstrap update shouldn't be difficult. You have to edit bootstrap.scss anyway (add @import "custom"; in case of using _custom.scss). – Dmitry Somov Mar 29 '19 at 08:39

3 Answers3

3

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.

Leo
  • 10,407
  • 3
  • 45
  • 62
1

I'm not especially pleased with my current solution, but it simply works as a way to "override" variables in my current Angular implementation of Bootstrap 4.

  1. Create a _custom.scss file in your project
  2. Create a new bootstrap.scss in the project
    • Copy the contents of bootstrap.scss from Bootstrap to the new file (e.g., node_modules\bootstrap\scss\bootstrap.scss)
    • Update each import with the correct file location relative to the new bootstrap.scss file
    • Add an import for your new custom file between variables and mixins
  3. Update wherever you import Bootstrap to reference the newly created bootstrap.scss file

Sample implementation:
Folder structure:

app  
└── styles  
    ├── bootstrap.scss  
    └── _custom.scss

_custom.scss:

// For example, change links to be yellow
$link-color: yellow;

bootstrap.scss contains:

@import "~bootstrap/scss/variables";
@import "custom";
@import "~bootstrap/scss/mixins";
//etc.

app.component.scss (my location for any additional styles outside of Bootstrap):

@import "./styles/bootstrap"; // instead of @import "~bootstrap/scss/bootstrap";
Sean
  • 152
  • 1
  • 13
-1

Are you sure you are using the source version of Bootstrap 4 alpha 6? Or haven't deleted _custom.scss by accident?

If you look at the git repo for Boostrap 4 alpha 6, _custom.scss is included.

lookininward
  • 641
  • 4
  • 25