質問: ### 前提・実現したいこと 前提: SASS初心者です。npm install 済み 実現したいこと: Laravel のフレームワークでLaravel-Mixを使い、bootstrap をベースにSASSファイルを書いてます。 問題なく動くけど、多分同じbootstrapファイル二度何が無駄の多いCSS作成しでいます。一度のインポートしたら二回目はインポートしないでそのまま継承できるかな?もしくは他の方法をご教授お願い致します。 ### 発生している問題 ふたつのsassファイルbootstrapをインポートしてを書いてます、生成したCSSファイルに同じbootstrapの内容二度出ています。 menu.sass (全画面に使う) index.sass (個別の一覧画面に使う) ### 該当のソースコード ``` // resources/sass/menu.sass @import "~bootstrap/scss/bootstrap"; .login-btn{ @extend .btn; @extend .btn-success; @extend .col-md-auto; @extend .mt-1; @extend .mr-1; /** 関係ないので省略 **/ } /** 関係ないので省略 **/ ``` ``` // resources/sass/index.sass @import "~bootstrap/scss/bootstrap"; .tbl-name-col{ @extend .col-md-auto; @extend .mt-1; @extend .mr-1; /** 関係ないので省略 **/ } /** 関係ないので省略 **/ ``` ### 試したこと 試しに二度目のindex.sassでbootstrapをインポートしないなら以下のエラーメッセージが出ました、 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9eef54e421c8e9353ac55ddeaefb9b3e.png) ### 補足情報(FW/ツールのバージョンなど) Laravel 5.7 Laravel-Mix 4.0.7 bootstrap 4.0.0 PHP 7.2
回答: Bootstrap4は、各モジュール毎にScssファイルがわかれているので、 `node_modules/bootstrap/scss`以下のファイルで必要分のみを読み込むと良いかと思います。 例) ``` @import "~bootstrap/scss/_buttons"; ```