Laravel-mix: Refreshing styles with "npm run hot" and sass

[Bomavi]

Greetings!

I have an issue with refreshing styles in hot-mode, I don't see any errors, build was successfully compiled, I saw some movements in "Dev Console" and that's it... after that I don't see any changes on the webpage... Anyway, everything fine with Vue refreshing...

webpack.mix.js
mix.sass('resources/assets/sass/app.scss', 'public/css');

index.blade.php
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

I'm doing something wrong?
Thanks

[adriaanzon]

Hot reloading sass isn't supported, see https://github.com/JeffreyWay/laravel-mix/issues/92#issuecomment-273558018. It's only for javascript modules.

Maybe this should be more explicitly noted in the docs @JeffreyWay

[JeffreyWay]

I think we're going to implement Browsersync to fix this.

[vedmant]

Browsersync isn't really working properly with Vue.js and reloading whole page instead of component.

There is a solution to include app.scss file from the main app.js:

import '../sass/app.scss'

and remove from webpack.mix.js:

.sass('resources/assets/sass/app.scss', 'public/css')

Everything with like a charm in this case.

For production it however will require to configure ExtractTextPlugin.