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

Drupal 8 Theme

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


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
npm run prod


Since I wrote this article sass-loader 8.0 had a breaking change this Laravel Mix – you can uninstall 8.x and rollbacking to 7.x using the following commands

npm uninstall –save-dev sass-loader
npm install –save-dev sass-loader@7.1.0

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