Last active
December 4, 2022 23:30
-
-
Save hailwood/82242c08807f1939fc90f60c92a476cf to your computer and use it in GitHub Desktop.
HMR sass support for laravel mix
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
if (!function_exists('isHMR')) { | |
/** | |
* Get whether HMR is active. | |
* | |
* @return bool | |
*/ | |
function isHMR() | |
{ | |
return file_exists(public_path('hot')); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require('../sass/app.scss'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment