Resources(css/js) not compiling with Bud in Sage theme with Lando setup

bud
, , ,
1

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. :smile:

2

Hello! I also use Lando for local development. We can look at my repo to see how it works for me. GitHub - valeravilks/celestial. You haven’t written exactly how you use it. Can you do this Sage + Bedrock?

3

Hi Valera,

Thanks so much for the response, I didnt have time to try it with Sage + Bedrock yet, but I will. My project structure is just a default Wordpress install with the lando file in the same folder as the install and it looks like this:

├── .lando.yml
├── wp-admin/
├── wp-includes/
├── wp-content/
│   ├── themes/
│   │   ├── imobiliaria /* Sage Theme */
│   │   │   ├── app/
│   │   │   ├── resources/
│   │   │   ├── bud.config.js
│   │   │   ├── package.json
├── index.php
├── wp-config.php
├── .htaccess
└── etc...

I took a look at your repo and I’ve liked it very much(i’ll try to clone it to my machine later) but tbh I didnt understand how it works, wheres the wordpress install? Would you mind explaining it a bit for me if it’s not too much work for you to do?