Laravel-MixでSASSのglob importを使う

よりよい方法があったら教えてください。

---

Laravel 5.4 から標準となったLaravel Mixで、Sass(SCSS)ではやっぱり欲しいglob importを使いたいと思ったところデフォルトでは対応してなかった。

こういうやつ。

@import "layout/*";
@import "modules/**/*";

とはいえ、webpack.mix.jsでmix.webpackConfigを呼んでやればWebpackのオプションを簡単に拡張できる。

Webpackでglob importを使うにには import-glob-loader を使った。2年以上更新されていないし作者が “this plugin is a dead” とか言っているのが気になるが、とりあえず設定方法さえWebpack2に併せておけばWebpack2でも動くようなのでこれを使った。

install

npm i -D import-glob-loader

webpack.mix.js

const { mix } = require('laravel-mix');

mix.webpackConfig({
        module: {
            rules: [{
                test: /\.scss/,
                enforce: "pre",
                loader: 'import-glob-loader'
            }]
        }
    })
   .js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sourceMaps();

こんな感じでビルドを走らせればglobがいい感じに展開されて出来上がる。
SourceMapもちゃんと吐き出される。globは展開されている状態でだけど。