scssファイルにブートストラップのユーティリティクラスをいくつか使用しようとしています。SCSSファイル内のブートストラップユーティリティクラスの拡張
例
.pageTitle { @extend .p-3, border-bottom: 1px solid red}
私は、私は多くのファイルでユーティリティクラスを拡張しようとすると、私は私のバンドルサイズが増加している複数の内bootstrap.scssを含める必要があり、この@import '~bootstrap/scss/bootstrap-grid.scss';
のようにブートストラップインポートしています私はwebpackを使ってバンドルしようとします。また、ビルド時間も大幅に増えます。
bootstrap.scssを一度含める方法はありますか？
あなたが最初にあなたもあなたのライブラリファイルを含めるよりも、必要なブートストラップSCSSファイルをインポートメインSCSSファイルを持つことができます。
この「マスター」ファイルをproject.scssとしましょう。だから、あなたのproject.scssファイルには、次のようになります。_typography.scssと_my-他-styles.scssファイルがproject.scssと同じディレクトリにある
// Extended Bootstrap files
@import '~bootstrap/scss/bootstrap-grid.scss';
// Projects styles
@import "typography";
@import "my-other-styles";
// …etc…
をファイル。このようにして、すべてのファイルは、インポートされたブートストラップファイルで定義されたものにアクセスできます。
bootstrap.scssを例に見ることもできます。最初に関数、変数、およびミックスインをインポートします。これは、後でscssファイルで使用されます。