Laravel Mix with Wordpress

Setting up Webpack or Gulp and configuring it from scratch, can be painful. Laravel Mix make it much easier. Mix isn't just for Laravel projects - it can be used pretty much for anything - Drupal, CraftCMS & of course Wordpress.

Install Mix with Wordpress

Navigate to to the root directory (or you can install it in the theme folder /wp-content/themes/THEMENAME/)

Run the following command

npm init -y
npm install laravel-mix --save-dev

Setup with Wordpress

Create the mix configuration file, if it's not there, create it by running the following command.

touch webpack.mix.js

My prefered setup is below - I use SASS/SCSS files but changing the function from SASS to LESS will allow you to compile LESS files

let mix = require('laravel-mix');
// your Wordpress theme name here
var themename = "website";
const themePath = 'wp-content/themes/' + themename + '';
const resources = themePath + '/src';
mix.setPublicPath(`${themePath}/assets`);

mix.sass(`${resources}/scss/app.scss`, `${themePath}/assets/css`).sourceMaps();
mix.js(`${resources}/js/app.js`, `${themePath}/assets/js`)

//mix.browserSync('https://mywebsite.test');

Example of my preferred directory structure is

/wp-content/themes/THEMENAME/assets - All compiled css & javascript
/wp-content/themes/THEMENAME/src - All source scss & javascript files

Wordpress Directory

Run Mix

Once your config file is setup to your liking - to compile your CSS & Javascript just enter one of the following command in your terminal

## On off running of the files
npx mix

## Watch command - await changes to the source files
npx mix watch

## production - compile all files and minify them
npx mix production

That is it


About Fraser Clark

I've been a professional developer for over 10 years. I've been consulting and developing websites & software for small businesses, multi-nationals & governments.

I'm an expert in WordPress, Drupal, Laravel & a whole host of other platforms.

More about Fraser | Get in touch