web-dev-qa-db-ja.com

実際のソースコードを変更せずにBootstrapミックスインをオーバーライドする方法は？

Bootstrap 4を使用していますが、ボタンのホバーとアクティブ状態のデフォルトのスタイルを変更したいと思います。これらはSassミックスインでハードコーディングされているため、変数で変更することはできません。例：

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

希望のスタイルを得るには、暗くして明るくしてからパーセントを変更する必要があります。

ソースコードを変更することはできますが、メンテナンスに適したソリューションとは思えません。 Bootstrapの後に含まれるカスタムcssファイルでこれらの値をオーバーライドすることもできますが、基本的には、ボタンソース全体をBootstrapからコピーアンドペーストして変更する必要があります。ボタンのバリエーションがたくさんあるので、Bootstrap cssへの変更を含めることができる場合は不要なオーバーライドがたくさんあります。

最善の解決策は、コンパイル前にBootstrapでボタンバリアントのミックスイン全体をオーバーライドして、コンパイルされたBootstrapファイルに必要なcssのみが存在するようにすることです。それを行うための最良の方法は？

twitter-bootstrapsassmixins
7
m5seppal

コンパイルする前に、独自のバージョンを追加してミックスインをオーバーライドします。

/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%);
  ...
4
Sean

既存のbootstrapファイルを変更する必要はありません。

私のために働いている最もクリーンな解決策は、すべてのベースbootstrapインポートを自分のファイルに含めてbootstrap-custom.scssファイルとスワップオリジナル_ mixins.scss自分のカスタムファイルを除いて、すべての元のミックスインを含むファイル_ buttons.scss。

3
Janusz Skalski

bootstrapミックスインを使用した後、それらを上書きしても機能しないようです-この問題で説明されているように： https://github.com/sass/sass/issues/24

そのため、最終的にbootstrapメインソースファイルを変更しました。これは美しい解決策ではありませんが、順序が非常に重要であるため必要です。私の場合は次のようになります（ 'bootstrap-sass /アセット/スタイルシート/ブートストラップ '）：

/*!
 * 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
3
Jerome Jeannin