Skip to content Skip to footer navigation
Light theme Dark theme

Mix Tag

The Mix tag is used in tandem with Laravel Mix to return the path to versioned CSS and JavaScript files.

Overview#

Laravel Mix is an Webpack API wrapper for compiling and building CSS and JavaScript files. The mix tag returns the path to a versioned Mix file. Don't worry, if you're not using versioning it will return the path to the non-versioned file.

Webpack and asset compilation can be a pretty complicated task and Laravel Mix does a really good job of simplifying it as far as it can possibly go.

// CSS

<link href="{{ mix src='/css/tailwind.css' }}" rel="stylesheet">



// JavaScript

<script src="{{ mix src='/js/app.js' }}"></script>

// CSS

<link href="{{ Statamic::tag('mix')->src('/css/tailwind.css') }}" rel="stylesheet">



// JavaScript

<script src="{{ Statamic::tag('mix')->src('/js/app.js') }}"></script>

Default Directory#

By default Mix will assume that the mix-manifest.json file that points to the proper file locations is in your public/ directory. If your file is configured to build elsewhere you can point to it with the in parameter.

<link href="{{ mix src='/css/tailwind.css' in='assets' }}" rel="stylesheet">

<link href="{{ Statamic::tag('mix')->src('/css/tailwind.css')->in('assets') }}" rel="stylesheet">

Parameters

src

string

The path to the versioned file, relative to your public/ directory.

in

string

The location of your mix manifest file relative to the public/ directory.