I’m using sage but when im doing yarn build, the style is showing from the public folder. But when I do yarn watch, all the styling is gone. And also from on the .test website. I have to do yarn build again for styling is coming back on the .test site.
This is my bud.config.js.
Any ideas?
/**
* Compiler configuration
*
* @see {@link https://roots.io/sage/docs sage documentation}
* @see {@link https://bud.js.org/learn/config bud.js configuration guide}
*
* @type {import('@roots/bud').Config}
*/
export default async (app) => {
/**
* Application assets & entrypoints
*
* @see {@link https://bud.js.org/reference/bud.entry}
* @see {@link https://bud.js.org/reference/bud.assets}
*/
app
.entry({
app: ['scripts/app.js', 'styles/app.scss'],
styleguide: ['scripts/app.js', 'styles/styleguide.scss'],
})
.assets(['images']);
/**
* Set public path
*
* @see {@link https://bud.js.org/reference/bud.setPublicPath}
*/
app.setPublicPath('/app/themes/sage/public/');
/**
* Development server settings
*
* @see {@link https://bud.js.org/reference/bud.setUrl}
* @see {@link https://bud.js.org/reference/bud.setProxyUrl}
* @see {@link https://bud.js.org/reference/bud.watch}
*/
app
.setUrl('http://localhost:3000')
.setProxyUrl('http://PROJECT.test')
.watch(['resources/views', 'resources/styles', 'app'])
.when(app.isDevelopment, (app) => app.devtool())
.when(app.isProduction, (app) => app.devtool(false));
/**
* Generate WordPress `theme.json`
*
* @note This overwrites `theme.json` on every build.
*
* @see {@link https://bud.js.org/extensions/sage/theme.json}
* @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
*/
app.wpjson
.setSettings({
background: {
backgroundImage: true,
},
color: {
custom: false,
customDuotone: false,
customGradient: false,
defaultDuotone: false,
defaultGradients: false,
defaultPalette: false,
duotone: [],
},
custom: {
spacing: {},
typography: {
'font-size': {},
'line-height': {},
},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
typography: {
customFontSize: false,
},
})
.enable();
};