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

bud
,
20

Updated my example for more recent versions of bud.js:

Project structure:

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

Utility function:

import {basename, join} from 'node:path';
import glob from '@roots/bud-support/globby';

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

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

bud.config.js:

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

Output:

public
├── css
│   └── blocks
│       └── block-a.ef46db.css
└── js
    └── blocks
        └── block-a.ac6f89.js

entrypoints.json:

{
  "blocks/block-a": {
    "js": [
      "js/runtime.c039ed.js",
      "js/blocks/block-a.ac6f89.js"
    ],
    "css": [
      "css/blocks/block-a.ef46db.css"
    ],
    "dependencies": []
  },
  "blocks/block-b": {
    "js": [
      "js/runtime.c039ed.js",
      "js/blocks/block-b.606d10.js"
    ],
    "dependencies": []
  }
}
2 Likes