How to create _custom.scss to override variable in

问题:

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?

回答1:

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.

回答2:

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";

回答3:

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.