Hi all!
I’m currently working with a parent Sage theme and trying to get a child theme working with a standalone Bud compiler. The issue I’m running into is the following:
- By default the Sage theme Bud compiler works with a “resources → public” folder structure
- The standalone Bud compiler works with a “src > dist” folder structure
So if I want inheritance inside my child theme then I have to make sure both themes have the same output file structure. So I changed the @dist path to ‘./public’ in my child theme bud.config.js file which works great and creates my files in the public folder but then it says it’s missing a runtime file.
To solve this I add a runtime file by adding .runtime('single') to my config file and this generated the runtime file that I need. That is also great but I want my files to be hashed so I don’t get any caching issues after development. Now it can’t find the runtime.js file again as it doesn’t look for the hashed version. I’ve been stuck on this for a while as I’m not sure how this works “under the hood”.
Does anyone know how I can have hashing enabled and still make sure the file is found?
In my child theme where I have the Bud compiler without Sage I have the following bud.config.js:
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} app
*/
module.exports = async (app) => {
app
/**
* Reference absolute path of the output folder
*/
.setPath('@dist', './public')
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
app: ['styles/**/*', 'scripts/**/*'],
})
/**
* Generate a runtime chunk intended to be inlined on the page. Used for code splitting.
*/
.runtime('single')
/**
* Enables minification of static assets.
*/
.minimize()
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets([[app.path('src/images'), app.path('public/images')]])
/**
* Enable filename hashing of built assets.
*/
.hash(true)
/**
* These files will trigger a full page reload
* when modified.
*/
.watch('src/**/*')
/**
* Target URL to be proxied by the dev server.
*
* This is your local dev server.
*/
.proxy('http://voys.test/48percent')
/**
* Development URL
*/
.serve('http://localhost:3000');
};