Sass - 共通のファイルを自動でインポートする

共通ファイルを都度インポートするのが面倒だったので、自動で読み込ませる方法がないか探してみたところ、いい感じのライブラリが見つかったので紹介します。

方法はいくつかあるようですが、複数ファイルを同時にインポートする場合であれば sass-resources-loader というライブラリの使い勝手が良さそうでした。

使い方

sass-resources-loader をインストールします。

npm i -D sass-resources-loader

webpack.config.js に sass-resources-loader の設定を書いていきます。以下のサンプルのように resources に読み込ませたい sass ファイルを記述してください。

webpack.config.js

あとは通常通りコンパイルしてあげれば、指定のフォルダ以下のファイルが自動でインポートされるようになります。