twitter-bootstrap 如何在不修改实际源代码的情况下覆盖 Bootstrap mixin？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39707334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override Bootstrap mixin without modifying the actual source code?
提问by m5seppal
I'm using Bootstrap 4 and I would like to change default style of button hover and active states. Those can't be changed with variables because those are hard coded in Sass mixins. For example:
我正在使用 Bootstrap 4，我想更改按钮悬停和活动状态的默认样式。这些不能用变量改变，因为它们是在 Sass mixin 中硬编码的。例如：
@mixin button-variant($color, $background, $border) {
$active-background: darken($background, 10%);
$active-border: darken($border, 12%);
...
In order to get the style I want, I need to change darken to lighten and then change percents.
为了获得我想要的样式，我需要将变暗改为变亮，然后更改百分比。
I could modify source code but it doesn't sound like a good solution for maintenance. I could also override those values with my custom css file included after Bootstrap but then I basically need to copy-paste whole button source from Bootstrap and modify it. Because there is lot of button variants, there will be lot of overrides which would be unnecessary in case of I can include changes to Bootstrap css.
我可以修改源代码，但这听起来不是一个很好的维护解决方案。我也可以使用包含在 Bootstrap 之后的自定义 css 文件覆盖这些值，但是我基本上需要从 Bootstrap 复制粘贴整个按钮源并修改它。因为有很多按钮变体，所以会有很多覆盖是不必要的，以防我可以包含对 Bootstrap css 的更改。
Best solution would be to override whole button-variant mixin in Bootstrap before compilation so that in compiled Bootstrap file there is only css I want. What would be the best way to do that?
最好的解决方案是在编译之前覆盖 Bootstrap 中的整个按钮变体 mixin，以便在编译的 Bootstrap 文件中只有我想要的 css。这样做的最佳方法是什么？
回答by Sean
Override the mixin by including your own version after it before compiling.
在编译之前通过在其后包含您自己的版本来覆盖 mixin。
/scss/site.scss
/scss/site.scss
// libraries
@import 'libraries/bootstrap/bootstrap';
// your custom sass files
@import 'overrides/bootstrap/mixins';
/scss/overrides/bootstrap/mixins.scss
/scss/overrides/bootstrap/mixins.scss
@mixin button-variant($color, $background, $border) {
$active-background: darken($background, 10%);
$active-border: darken($border, 12%);
...
回答by Jerome Jeannin
Overwriting the bootstrap mixins after using them doesn't seem to work - like this issue describes: https://github.com/sass/sass/issues/240
使用它们后覆盖引导混合似乎不起作用 - 就像这个问题描述的那样：https: //github.com/sass/sass/issues/240
So I ended up with modifying the bootstrap main source-file. This is no beautiful solution, but needed since the order is that important. In my case it looks like this ('bootstrap-sass/assets/stylesheets/bootstrap'):
所以我最终修改了引导程序主源文件。这不是一个漂亮的解决方案，但需要，因为顺序很重要。在我的情况下，它看起来像这样（'bootstrap-sass/assets/stylesheets/bootstrap'）：
/*!
* Bootstrap v3.3.7
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT
*/
// Core variables and mixins
@import "own_variables";
@import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "bootstrap-sass/assets/stylesheets/bootstrap/mixins";
@import "own_mixins";
// ... rest of bootstrap includes which use the mixins to create classes
回答by Janusz Skalski
There is no need to modify existing bootstrap files.
无需修改现有的引导程序文件。
Cleanest solution, working for me, is to include all base bootstrap imports in my own bootstrap-custom.scssfile and swap original _mixins.scssfile with my own, again including all original mixins with exception of my custom _buttons.scss.
对我有用的最干净的解决方案是将所有基本引导程序导入包含在我自己的bootstrap-custom.scss文件中，并将原始_mixins.scss文件与我自己的文件交换，再次包括除我的自定义_buttons.scss之外的所有原始 mixin 。
回答by Glucide
To overwrite a mixin, The easiest and cleanest way is:
要覆盖一个 mixin，最简单和最干净的方法是：
copy the file bootstrap.scss in your own custom folder:
@import "functions"; @import "variables"; @import "mixins"; @import "root"; etc...Adapt the files paths and add you own file in the list
@import "../../bootstrap-4.4.1-dist/scss/functions"; @import "../../bootstrap-4.4.1-dist/scss/variables"; @import "../../bootstrap-4.4.1-dist/scss/mixins"; @import "bs-mixins"; <--- put your customized mixins file after the bootstrap mixins @import "../../bootstrap-4.4.1-dist/scss/root"; etc...
将文件 bootstrap.scss 复制到您自己的自定义文件夹中：
@import "functions"; @import "variables"; @import "mixins"; @import "root"; etc...调整文件路径并将您自己的文件添加到列表中
@import "../../bootstrap-4.4.1-dist/scss/functions"; @import "../../bootstrap-4.4.1-dist/scss/variables"; @import "../../bootstrap-4.4.1-dist/scss/mixins"; @import "bs-mixins"; <--- put your customized mixins file after the bootstrap mixins @import "../../bootstrap-4.4.1-dist/scss/root"; etc...
It makes sense to have all the needed bootstrap features listed together here. It is also the right place to make some cleanup if you don't need all features, in order the reduce the css footprint.
在这里列出所有需要的引导功能是有意义的。如果您不需要所有功能，它也是进行一些清理的正确位置，以减少 css 占用空间。
