Use the mix helper function to get the correct path to your versioned CSS and JS files generated by Laravel Mix.
Download and copy this repository to site/plugins/laravel-mix-kirby.
git submodule add https://github.com/Diverently/laravel-mix-kirby.git site/plugins/laravel-mix-kirby
composer require diverently/laravel-mix-kirby
You should also install Laravel Mix, otherwise this plugin is pretty useless ;-) See the installation guide for further information, though it's actually pretty straight forward:
In your site/config/config.php you can set two options to make this helper work with your specific setup:
This is where the helper function will look for the manifest created by Laravel Mix.
Default: assets/mix-manifest.json
This will be prepended to the individual file paths given to the mix() function when creating the final HTML tags.
Default: assets
The mix() helper function reads the mix-manifest.json file and returns the right HTML tag with the correct path to the requested file. In our example we would call it like so:
<html>
<head>
<!-- ... -->
<?php echo mix('/main.css') ?>
<?php echo mix([
'/additional.css',
'@autocss'
]) ?>
</head>
<body>
<!-- ... -->
<?php echo mix('/main.js') ?>
<?php echo mix([
'/additional.js',
'@autojs'
]) ?>
</body>
</html>And that's it, actually.
- If you haven't already, create a
package.jsoninside your project root:npm init -y - Install Laravel Mix:
npm install laravel-mix --save-dev - Copy the
webpack.mix.jsfile into your root:cp node_modules/laravel-mix/setup/webpack.mix.js ./
After that you can start using Laravel Mix in your project.
See the official documentation for more information.
let mix = require("laravel-mix")
mix.setPublicPath("assets")
mix.browserSync("my-website.dev")
if (mix.inProduction()) {
mix.version()
}
mix
.sourceMaps()
.js("src/js/main.js", "assets")
.sass("src/css/main.scss", "assets")Add the following NPM scripts to your package.json:
"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 --disable-host-check --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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}The idea behind this originally came from the
mixBlade helper created for the Laravel framework. This is merely a "translation" for the Kirby CMS, only that it also generates the correct HTML tag depending on what file type you request.