Compiling CSS and JavaScript pre- and post-processors with Laravel Mix

Laravel Mix is a project that streamlines configuring Webpack, a bundler for frontend development. Laravel Mix was originally built to be used with Laravel projects but can be used for any project that bundles JavaScript or CSS pre- and post-processing.

In this recipe, we will add Laravel Mix to our theme for transpiling our ES6 JavaScript and PostCSS to post-process our CSS based on the desired browser support.

Getting ready

The Adding CSS and JavaScript to your theme recipe from this chapter covers how to create asset libraries for your theme. This section will use information from that recipe.

How to do it…

1. First, create a src directory in your theme to store source files for your CSS and JavaScript that will be processed by Webpack:

   mkdir src

2. Next, create a styles.css file in the src directory with the following:

   :root {

     --text-color: rgb(43, 43, 43);

   }

   body {

     ...