Laravel-mix: HMR not reloading SCSS

[shealan]

I have Laravel Mix setup on a project and it's working as expected. When running in hmr mode I can see in the console that it's recompiling each time I change a SCSS or JS file.

However, it's only reloading the javascript changes. If it's a SCSS file that's changed although HMR is triggered on the page, it says no changes have been detected.

[WDS] App hot update...
app.js:4282 [HMR] Checking for updates on the server...
app.js:9069 [HMR] Nothing hot updated.
app.js:4264 [HMR] App is up to date.

If I reload the web page then I see my SCSS changes.

Is this broken, or expected behaviour? I'd love to see my SCSS changes as well.

[justkidding96]

Same problem here I ask a question about it, but did get any reaction yet. U can find the question on the official Laravel forum: https://laracasts.com/discuss/channels/elixir/laravel-mix

[justkidding96]

@shealan I found a solution after a long time searching the web. On line 124 inside your webpack-config.js change it to this:

module.exports.module.rules.push({ test: /\.scss$/, loader: 'style-loader!css-loader?sourceMap!sass-loader?sourceMap&sourceComments' });

Note: this is only working for version 0.3.0

[nmfzone]

Which mix version that you use? Upgrade to the latest version (0.4.0) to get this thing works. I believe <= 0.3.0 will face this issue.

[justkidding96]

@nmfzone Just test it out with version 0.4.0 same problem css is not reloading also the HTML isn't!

@JeffreyWay Do u have a solution?

[nmfzone]

@justkidding96 Ok, could you give me some example of your code?
Because if you're using HMR, you must using the HMR location (eg. localhost:8080) in your css/js path. If you're using Laravel, you could see the mix() helper function here to make it automatically.

[nmfzone]

I just believe this isn't an issue. It just because TS don't have the correct setup.

[jfalotico]

@nmfzone i have the issue as well, using the mix helper already

[nmfzone]

@jfalotico What Mix version you used? Different version has different configuration for mix(). Please make sure you used the latest version of Mix (0.4.0).

[lukepolo]

I aslo am having the same issue

Mix 0.4.0
using newest mix() (from release notes)

new install this morning~

[nmfzone]

@lukepolo Hmmm, let's troubleshoot it. When you run npm run hmr, do you see hot in your public folder?

[lukepolo]

This happens when changing

font-size: 80px; to // font-size: 80px;

[nmfzone]

@lukepolo Do you read my question?

[lukepolo]

Sorry, didn't think it would be relevant since it wound't load my initial .css otherwise .

[harrynewsome]

I'm having the same issue. Running HMR with "laravel-mix": "^0.4.0", my css/js both point to http://localhost:8080/{js/css}/app.{js/css} and hot is present in my public folder.

Any ideas @nmfzone?

[justkidding96]

@nmfzone @lukepolo @jfalotico I post today a solution with version 4. The only problem which I got is that HMR no changes in the HTML detect. Maybe somebody has there a solution for?

[shealan]

@justkidding96 look forward to seeing it. I think you'll make a bunch of people happy :)

[justkidding96]

@nmfzone @lukepolo @jfalotico @shealan I've tested it and it works only with http://localhost:8080 Here is the link to my basic setup https://github.com/justkidding96/Mix-example

Good luck I hope that @JeffreyWay explains the problem and how to detect HTML changes..

[lukepolo]

my guess this commit fixed it , let me know if it works

https://github.com/JeffreyWay/laravel-mix/commit/a0a719105ae01fef10394b122c121cc35e37d3a9

[justkidding96]

@lukepolo Nope, didn't work I run the latest version which is updated about 4 hours ago. The css isn't reloading it self.

@JeffreyWay Still we (the community) can not use the full experience of HMR. It's to bad to see no reaction.

[JeffreyWay]

HMR doesn't include hot reload regular HTML changes in your blade files.

[anchiceratops]

@JeffreyWay I guess they don't talk about regular HTML changes. But as you can see in the title, they talking about when running HMR, after modify the .scss file, hmr not changed the display directly.

[JeffreyWay]

It won't work right now for regular Sass files. The HMR feature is specifically for Vue and .vue components.

[anchiceratops]

@JeffreyWay Ah, that's what they waiting for. Thank you for your response.

[lukepolo]

Maybe this could help ?

https://github.com/webpack/extract-text-webpack-plugin/issues/30#issuecomment-220724110

[justkidding96]

@lukepolo This was original my hot fix to. But I decide to use browser-sync works like a charm for me. It is to bad that HMR not supporting sass reloading out of the box, maybe in the feature...

[amcsi]

What I was able to do to get hot reloading of app.scss to work (with VueJS) was to do this in my root .vue component:

<style lang="scss">
    @import 'resources/assets/sass/app.scss';
</style>

Notice lang="scss" and no scoped.

[lukepolo]

You can acutally get it to reload the SASS files without doing anything odd like importing it like that : take a look at my build : https://github.com/variejs/varie/blob/master/build/loaders/scss.js
(although this is webpack 4) you can just make sure to use the style-loader when using HMR and it natively will reload your sass properly