Bud config for outputting multiple css files (from scss for ACF Blocks)

bud
,
6

Personally, I’d keep the blocks grouped by domain. It’s easier to work with.

My example uses this structure:

├── app
│   ├── blocks
│   │   ├── block-a.php
│   │   └── block-b.php
├── resources
│   ├── blocks
│   │   ├── block-a
│   │   │   ├── index.css
│   │   │   └── index.js
│   │   └── block-b
│   │       ├── index.css
│   │       └── index.js

Here is the asset mapper I came up with:

const {basename, join} = require('node:path');
const {globby} = require('@roots/bud-support');

const mappedAssets = async (dir) => {
  const assets = await globby.globby(`app/${dir}/*`);
  const rel = (s) => join(dir, basename(s, '.php'));
  const entry = (a, c) => ({...a, [c]: [c]});

  return assets.map(rel).reduce(entry, {});
};

And here is how it’s used:

app.entry({
  app: ['@scripts/app', '@styles/app'],
  editor: ['@scripts/editor', '@styles/editor'],  
   ...(await mappedAssets('blocks')),
});

You’ll end up with a dist directory that looks like this:

public
├── blocks
│   ├── block-a.4480df.js
│   └── block-b.4623bf.js
5 Likes