This is a Stamic add-on which allows you to build CSS and JavaScript files for your website using Laravel Mix. Mix differs from Laravel Elixir in several ways - the one we're interested in here is the mix-manifest.json file, if you're familiar with Elixir then you'll notice the filename has changed. This makes it incompatible with Statamic's built in support, hence needing a separate add-on.

The easiest way of installing this add-on is to download as a zip bundle straigt from GitHub and placing it in your site/addons directory.

An alternative way, if you're a Git user, would be do add it as a Git submodule. This gives you the avantage of being able to pull in any updates which may be published in the future. The following command will install this add-on as a submodule if run from the root of your project:

$ git submodule add https://github.com/edcs/laravel-mix-statamic site/addons/LaravelMix

This is an example webpack.mix.js file - it sets the public path where the built JavaScript and CSS should end up (I like to keep my Statamic application files out of my public directory), then it transpiles my JavaScript modules into a single file and finally it converts my SASS into CSS:

const laravelMix = require('laravel-mix');

laravelMix
    .setPublicPath('../../../public/site/themes/theme-name')
    .js('js/app.js', '/js/theme-name.js')
    .sass('scss/app.scss', '/css/theme-name.css');

One of the useful things Mix does is tell Webpack to version the built files so that the cache can be busted when new changes are published to a website. To implement this, the following change is required:

const laravelMix = require('laravel-mix');

laravelMix
    .setPublicPath('../../../public/site/themes/theme-name')
    .js('js/app.js', '/js/theme-name.js')
    .sass('scss/app.scss', '/css/theme-name.css')
    .version();

This will generate files with a filename similar to this, theme-name.a22b8a115a8da98d0a70.css. This file can now no longer be picked up by Statamic's built in theme CSS and JS tags as they no longer follow convention. Don't worry though, the next step solves that problem!

You can now update your theme template tags to use those provided by this add-on:

<!-- the default CSS template tag: -->
{{ theme:css }}

<!-- should be changed to: -->
{{ laravel_mix:css }}

<!-- the default JavaScript template tag: -->
{{ theme:js }}

<!-- should be changed to: -->
{{ laravel_mix:js }}

This add-on supports the following tags, these are:

When using Laravel Blade the add-on tags aren't available. Instead, use the modifier:

<!-- For CSS. -->
<link rel="stylesheet" href="{{ modify('css')->laravelMix() }}">

<!-- For JS. -->
<script src="{{ modify('js')->laravelMix() }}"></script>

Now you're ready to build your CSS and JavaScript assets using Laravel Mix - once complete, there should be a mix-manifest.json in the build directory.