Hi everyone,
I’m fairly new to Wordpress development and that also includes all the Roots stack, I really like the idea of using Sage and for now I’m trying it in a default Wordpress install, since I have a windows 10 machine I’m using lando to setup the containers for the project, My problem is that my blade files are reloading and compiling correctly when I save them, but not my css files, that includes tailwind classes, the the css are only rebuilding when i reload the dev server. I’ve folllowed all of Sage and Acorn install and build steps but it still didnt work. Here’s some config files that my be helpfull:
.lando.yml:
name: imobiliaria
recipe: wordpress
config:
php: '8.2'
webroot: .
proxy:
appserver:
- imobiliaria.lndo.site
theme:
- theme.imobiliaria.lndo.site:3000
services:
theme:
type: node:20
overrides:
ports:
- 3000:3000
database:
portforward: 3307
tooling:
npm:
service: theme
yarn:
service: theme
One thing that might be usefull to noteis that HMR with my blade files only worked when I added usePolling: true
to the watch config based on this post: https://discourse.roots.io/t/bud-not-recompiling-after-starting-yarn-dev-docker-setup/ .
bud.config.js:
export default async (app) => {
app
.entry('app', ['@scripts/app', '@styles/app'])
.entry('editor', ['@scripts/editor', '@styles/editor'])
.assets(['images']);
app.setPublicPath('/wp-content/themes/imobiliaria/public/');
app
.setUrl(3000)
.setPublicUrl('http://theme.imobiliaria.lndo.site')
.setProxyUrl('https://imobiliaria.lndo.site')
.setPublicProxyUrl('https://imobiliaria.lndo.site')
.watch(['resources/views', 'app'], {
usePolling: true,
});
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();
};
I’ve already check if the public path is correct and its the same of the config above.
I’ll be glad to send any additional information and very gratefull for any usefull insights or help.