_custom.scssを作成してブートストラップ4の変数をオーバーライドする方法alpha 6

Question

ブートストラップ4アルファ6テーマをカスタマイズしようとしています。 _variable.scssファイルから_custom.scssに設定をコピーして、上書きしたいと思います。しかし、私は_custom.scssファイルをソースコードで見つけられませんでした。この_custom.scssファイルをプロジェクトに追加するにはどうすればよいですか？

Answer 1

Iあなたの問題にご注意くださいhere,hereおよびhere：

☐容易に組み込まれた変数のオーバーライドのために_custom.scssを実装することを検討してください。あなたのブートストラップ4は_custom.scssファイルが付属していなかったので、

だから、あなただけ bootstrap/scss/_custom.scssを再作成する必要があります。

// Core variables and mixins 
@import "variables"; 
@import "mixins"; 
@import "custom"; 

その後/scss/_variables.scssのデフォルトの変数を簡単にオーバーライドのための_custom.scssファイルとCustomising variables

ブートストラップ4 [たぶん]船に従ってください：

そして、することになっているものにbootstrap/scss/bootstrap.scssを編集します。そこから該当する行をコピーして_custom.scssファイルに貼り付け、値を変更し、Sassを再コンパイルしてデフォルト値を変更します。 オーバーライド値から!defaultフラグを必ず削除してください。

Answer 2

ソースバージョンのBootstrap 4 alpha 6を使用していますか？または、偶然に_custom.scssを削除していませんか？

git repo for Boostrap 4 alpha 6を見ると、_custom.scssが含まれています。

Answer 3

私は私の現在のソリューションには特に満足してないんだけど、それは単にブートストラップ4.

1. の私の現在の角度の実装では、「オーバーライド」変数は、あなたの中に_custom.scssファイルを作成するための方法として機能しますプロジェクト
2. は、プロジェクト
   • コピーし、新しいファイルへのブートストラップからbootstrap.scssの内容（例えば、node_modules \ブートストラップ\ SCSS \ bootstrap.scss）
   • アップデート各Iに新しいbootstrap.scssを作成します。新しいbootstrap.scssファイルに正しいファイルの場所の相対でmport
   • 変数とミックスインの間に新しいカスタムファイルのインポートを追加
3. アップデートあなたが新たに作成されたbootstrap.scssファイル
を参照するようにブートストラップをインポートどこ

サンプル実装：
フォルダ構造：

app 
└── styles 
    ├── bootstrap.scss 
    └── _custom.scss 

_custom.scss：

// For example, change links to be yellow 
$link-color: yellow; 

bootstrap.scssが含まれています

@import "~bootstrap/scss/variables"; 
@import "custom"; 
@import "~bootstrap/scss/mixins"; 
//etc. 

app.component.scss（外ブートストラップのいずれかの追加のスタイルのための私の場所）：

@import "./styles/bootstrap"; // instead of @import "~bootstrap/scss/bootstrap";