Laravel Mix

Laravel Mix is a wrapper for Webpack that is (very conveniently) available for use outside of the Laravel environment.

  • Laravel mix is pre-configured to:

    • Compile all JavaScript from ./develop/resources/js to ./app/lib/themes/THEME_NAME/lib/js

    • Compile all SCSS from ./develop/resources/scss to ./app/lib/themes/THEME_NAME/style

  • Full Mix API options can be found in the comments of: ./webpack.mix.js

Change CSS & JS directories

In PROJECT_ROOT/webpack.mix.js change:

mix.js('develop/resources/js/bootstrap.js', 'app/lib/themes/' + themeFolder + '/lib/js/bootstrap.min.js')
.sass('develop/resources/scss/style.scss', 'app/lib/themes/' + themeFolder + '/lib/style/style.min.css');

To:

mix.js('your/js/src', 'your/js/dist')
.sass('your/scss/src', 'your/scss/dist');

If using the theme boilerplate, enqueue the files from their new locations in /app/lib/mu-plugins/ThemeSetup/EnqueueScripts.php & /app/lib/mu-plugins/ThemeSetup/EnqueueStyles.php

Build Scripts

Run from within the PHP container:

  • npm run watch: Watches for changes and runs npm run dev.

  • npm run watch-poll: Alternative to npm run watch for environments where npm run watch fails.

  • npm run dev: Compile scripts and styles, no minification.

  • npm run production: Compile scripts and styles with minification.