BrowserSync: Sass compilation causing whole page reload

• Laravel Mix Version: 1.4.2 (github:jeffreyway/laravel-mix#5aad0dfde5349e284e0876388a6f307547f7c002)
• Node Version (node -v): 8.2.1
• NPM Version (npm -v): 5.3.0
• OS: macOS Sierra 10.12.6

Description:

When using browserSync, css changes are injected however the page is also reloaded due to the fact that the JS bundle is re-emitted even when the only file that changed was a sass file.

Steps To Reproduce:

webpack.mix.js:

mix
	.js('resources/assets/js/main.js', 'public/assets/js/bundle.js')
	.extract(['jquery', 'babel-polyfill'])
	.autoload({
		jquery: ['$', 'jQuery', 'window.jQuery']
	})
	.sass('resources/assets/sass/style.scss', 'public/assets/css')
	.disableNotifications()
	.options({
			processCssUrls: false
	})
	.sourceMaps()
	.browserSync({
		proxy: process.env.APP_URL,
        files: [
            'app/**/*.php',
            'resources/views/**/*.php',
            'public/assets/js/**/*.js',
            'public/assets/css/**/*.css'
        ]
    })

Run npm run watch, site is served at localhost:3000, save a sass file and watch the browser refresh rather than just inject the changes.

[cgodo]

I finally found a workaround for my case.

I believe the issue is that laravel-mix’s CustomTasksPlugin runs all post-build tasks again for every rebuild. In these tasks is where all files built using .babel(), .scripts(), .combine(), .styles() and even .copy() are built again.

Here is a drop in plugin that ensures these tasks only run at the first build. Subsequent watch builds won’t rebuild all those files again unless you actually modified one of their files. This fixed all my browserSync reload problems.

mix.webpackConfig({
  plugins: [{
    apply(compiler) {
      // Intercept done hook to modify CustomTasksPlugin tap function
      compiler.hooks.done.intercept({
        register: (tapInfo) => {
          let firstRun = true;
          if (tapInfo.name === "CustomTasksPlugin") {
            const fn = tapInfo.fn;
            tapInfo.fn = (stats, callback, ...args) => {
              // Only run tap function (tasks) for first build
              if (firstRun) {
                fn(stats, callback, ...args);
                firstRun = false;
              } else {
                callback();
              }
            };
          }
          return tapInfo;
        }
      })
    }
  }],
});

[Grawl]

@karneaud the only workaround is to use mix.standaloneSass or just move styles build process out of Webpack