Laravel Mix with Drupal

Modern frontend development is a pain – Webpack,Gulp,Grunt, PostCSS, SASS,SCSS,LESS,Minification, Transpilers,Compilers, Babel,Auto-Prefixing – never ending “stuff” you don’t understand and have to learn

Laravel Mix is one of the easiest and quickest way to do the basics – compile SCSS/LESS & Javascript. Laravel Mix is an elegant wrapper around basic Webpack tasks. Laravel Mix was created for Laravel – but it can be used stand alone and on any application

When building Drupal 8 websites, I often turn to Laravel Mix – here is how I set it up

First I go to the root directory of the Drupal Install

npm init -y
npm install laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./

It will generate the following

  • package.json
  • webpack.mix.js
  • node_modules/

Open up the webpack.mix.js, modify the “theme name” on line 4

My personal preference to store the my “raw” SCSS & Javascript in a folder in the theme called src/ – with a folder for each

Which will compile to

 /web/themes/THEME_NAME/css/app.css 
 /web/themes/THEME_NAME/js/app.js 

Next to make things easier, I update the the package.json – as Laravel Mix recommends to make it easy to run the process

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

If using these scripts, you will need to “npm install cross-env –save-dev”

Finally, with all that done – you just need run the script

npm run watch
or
npm run prod

Drupal 7

To use it for Drupal 7 – you just need to update the paths to the theme to use /sites/all/themes – example below