@extend を含むSCSSファイルを分割する方法

やりたいこと

bootstrap を import して一部 scss でレイアウトの調整をしているんですが
ページによって使う部品使わない部品の CSS が大きくなってきたので
サブ SCSS に分割してページによって読み込む SCSS をかえようと思ってます

たとえば page1 をよみこんだときは部品 1 2 を使うので次の４つ
default.scss

page1.scss

-- part1.scss
-- part2.scss

page2 をよみこんだときは部品 1 3 を使うので次の４つ
default.scss
-page2.scss
-- part1.scss
-- part3.scss

みたいな感じです

問題点

@extend .p-1 とか @extend .btn とか
bootstrap のクラスを指定してレイアウトしてるためすべてのファイルに @bootstrap が必要になる

bootstrap の中身全部が展開されるとサイズが結構大きいので
分割して読み込むファイル全てに展開されると非常に無駄な気がします

bootstrap を使う以上 bootstrap に用意されているクラスをあてないと
バージョンアップ等に対応できないし

使う部品ごとに SCSS を分割してかつ無駄な重複 import をせずにコンパクトに保つにはどうすればいいのでしょうか

行動規範の内容に同意します

回答1件

bootstrap の中身全部が展開されるとサイズが結構大きいので

分割して読み込むファイル全てに展開されると非常に無駄な気がします

bootstrap/variablesとbootstrap/mixinsだけ@importすれば、これらにはミックスインや変数など、SCSS上のデータ定義だけが入っていて、CSSには何も出力されないので、各ファイルで@importしても肥大化の問題は生じません。

投稿2018/09/06 06:41

maisumakun

総合スコア145183

退会済みユーザー

2018/09/06 06:51

やってみましたが @import 'bootstrap' のかわりに @import 'bootstrap/functions'; // bootstrap_variables のために必要 @import 'bootstrap/variables'; @import 'bootstrap/mixins'; にかえてみたのですが @extend .col-md-3 のところで見つからないエラーがでてしまいます軽く調べたら　@include make-md-column(３);　みたいな書き方ができるようになるみたいですが既存の @extend を使った SCSS は全部書き直しになるのでしょうかあと .btn { @extend .btn-secondary } .form-control { @extend .form-control-sm } みたいな感じでデザインを指定しちゃってるんですがこういうのもかけますか？