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

 ̄綄美尐妖づ 提交于 2019-12-07 03:11:45

问题


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.



来源:https://stackoverflow.com/questions/43565650/how-to-create-custom-scss-to-override-variable-in-bootstrap-4-alpha-6

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!