如何在不修改實際源代碼的情況下覆蓋Bootstrap mixin？

我正在使用Bootstrap 4，我想更改按鈕懸停和活動狀態的默認樣式。這些變量不能用變量進行更改，因爲這些變量在Sass mixins中被硬編碼。例如：如何在不修改實際源代碼的情況下覆蓋Bootstrap mixin？

@mixin button-variant($color, $background, $border) { 
    $active-background: darken($background, 10%); 
    $active-border: darken($border, 12%); 
    ...

爲了獲得我想要的樣式，我需要將變暗變爲變亮，然後更改百分比。

我可以修改源代碼，但它聽起來不像是一個很好的維護解決方案。我也可以在Bootstrap之後使用我自定義的css文件覆蓋這些值，但是我基本上需要從Bootstrap中複製粘貼整個按鈕源並對其進行修改。因爲有很多按鈕變體，所以會有很多重寫，如果我可以包含對Bootstrap css的更改，那麼這將是不必要的。

最好的解決方案是在編譯之前覆蓋Bootstrap中的整個按鈕變量mixin，以便在編譯的Bootstrap文件中只有我想要的CSS。什麼是最好的方式來做到這一點？

來源

2016-09-26 m5seppal

你應該能夠包含自己獨立的文件，重寫該混入。如果bootstrap包含後，編譯器應該使用你的mixin。 – sean

在編譯之前，通過包含自己的版本來覆蓋mixin。

/scss/site.scss

// libraries 
@import 'libraries/bootstrap/bootstrap'; 

// your custom sass files 
@import 'overrides/bootstrap/mixins';

/scss/overrides/bootstrap/mixins.scss

@mixin button-variant($color, $background, $border) { 
    $active-background: darken($background, 10%); 
    $active-border: darken($border, 12%); 
    ...

來源

2016-09-26 16:06:12 sean

我試過這種方法，但開始出現錯誤：未定義的變量：「$ ...」，所以我認爲這種方法不起作用。我想我不應該再次包含Bootstrap變量。也許還有其他問題，我會再試一次。 – m5seppal

請確保你的主scss文件中包含引導程序，並且所有內容都編譯在一起@ m5seppal – sean

我得到了這個工作，但似乎並沒有比Bootstrap包含自定義樣式更好的方法。爲了覆蓋Bootstrap變量，只有我自己的樣式確實有效，因爲Bootstrap變量有！default。但是如果我重寫mixin，那麼最初的mixin仍然會被編譯，並且會有很多重複的代碼。到目前爲止，我已經能夠想到的最佳方法是將主要文件的原始源代碼註釋掉，幷包含您自己的自定義版本。 // @ import「buttons」; @import「覆蓋/按鈕」; – m5seppal

使用它們似乎不工作後重寫引導混入 - 這樣問題描述： https://github.com/sass/sass/issues/240

所以我最終修改了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

來源

2017-01-13 11:22:41

如何在不修改實際源代碼的情況下覆蓋Bootstrap mixin？

回答

相關問題