I’m using WampServer locally and have created a WordPress project. I install Sage using the following command (executed via WSL):
composer create-project roots/sage mytheme
Then, I navigate to the theme folder and run the following commands:
composer require roots/acorn
yarn
yarn dev
My bud.config.js settings are as follows:
/**
* 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', '@styles/app'])
.entry('editor', ['@scripts/editor', '@styles/editor'])
.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://mywebsite.test')
.watch(['resources/views', 'app']);
/**
* 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,
},
})
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize();
};
Now, when I make changes to app.js or app.css, the updates are not reflected live in the browser. I have to run yarn dev again to see the changes.
╭ sage [64e22ce99a2fe612] ./public
│
│ app
│ ◯ js/runtime.js 49.13 kB
│ ◯ js/app.js 157.75 kB
│
│ editor
│ ◯ js/runtime.js 49.13 kB
│ ◯ js/editor.js 148.79 kB
│
╰ 1m 255ms 115 modules [0/115 modules cached]
Network
› Proxy ┄ http://mywebsite.test/
› Dev ┄ http://localhost:3000/
┄ http://192.168.22.212:3000/
Where is the problem?