Using Laravel Mix to theme your Drupal site with live reloading

In the previous recipe, Compiling CSS and JavaScript pre and post processors with Laravel Mix, we set up Laravel Mix for a theme. Laravel Mix supports Browsersync. Browsersync is a tool that monitors changes in your source files and injects the changes into the browser so that you do not need to refresh the page manually.

In this recipe, we will leverage the BrowserSync functionality to speed up the development of building your Drupal theme.

Getting started

Make sure that aggregation of CSS and JavaScript files is disabled by visiting the Performance configuration form at /admin/config/development/performance.

Alternatively, you can add the following configuration override to your settings.php to force-disable aggregation:

$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;

This...