HMR sass support for laravel mix

helpers.php

<?php

if (!function_exists('isHMR')) {
    /**
     * Get whether HMR is active.
     *
     * @return bool
     */
    function isHMR()
    {
        return  file_exists(public_path('hot'));
    }
}

hmr.js

require('../sass/app.scss');

webpack.config.js

//insert at line 117

if (Mix.hmr) {
    module.exports.module.rules.push({
        test:   /\.scss$/,
        loader: 'style-loader!css-loader?sourceMap!sass-loader?sourceMap&precision=8'
    },{
        test:   /\.less$/,
        loader: 'style-loader!css-loader?sourceMap!less-loader'
    });
}

//in the block below, the only change is adding the !Mix.hmr check
if(Mix.cssPreprocessor && !Mix.hmr) {
    Mix[Mix.cssPreprocessor].forEach(toCompile => {
        let extractPlugin = new plugins.ExtractTextPlugin(
            Mix.cssOutput(toCompile)
        );

        module.exports.module.rules.push({
            test:   new RegExp(toCompile.src.fileWithDir.replace(/\\/g, '\\\\') + '$'),
            loader: extractPlugin.extract({
                fallbackLoader: 'style-loader',
                loader:         [
                    'css-loader',
                    'postcss-loader',
                    'resolve-url-loader',
                    (Mix.cssPreprocessor == 'sass') ? 'sass-loader?sourceMap&precision=8' : 'less-loader'
                ]
            })
        });

        module.exports.plugins = (module.exports.plugins || []).concat(extractPlugin);
    });
}

webpack.mix.js

mix
  .js('resources/assets/js/app.js', 'public/js')
  .js('resources/assets/js/hmr.js', 'public/js')
  .sourceMaps();

if (!process.argv.includes('--hot')) {
  mix.sass('resources/assets/sass/app.scss', 'public/css')
}

welcome.blade.php

{{-- Only includes the css sheet if we're not doing hot module reloading, otherwise include our hmr js --}}
@if(!isHMR())
  <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
@else
  <script src="{{ mix('/js/hmr.js') }}"></script>
@endif

{{-- Always include our main app js --}}
<script src="{{ mix('/js/app.js') }}"></script>