Way to import any SCSS files from multiple folders in bud.config.mjs?

sage
1

I have a site with 50+ blocks registered. The structure I have is that all block files are found in /views/blocks/block-name/. Each folder contains the PHP template and scss file for each blocks. What I’d like to to is import all the scss files - using a wildcard in the blocks folder to grab all the .scss files fromeach blocks folder and compile into app.css.

So far, I’ve tried:

app

    .setPath('@blocks', './resources/views/blocks/*')

    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
      blocks: ["@blocks/*"]
    })

Which doesn’t work, and:

assets(["images","views/blocks/**/*"])

… seems to load php files and everything into the compilation.

Has anyone else had experience picking out scss from a bunch of wildcarded folders?

2

Have you tried: assets(["images","views/blocks/**/*.scss"])

1 Like
3

I have, it compiles but the URL it seems to compile is:

◌  views/blocks/**/*.scss/views/blocks/banner/banner
4

I would skip setting a path for this. The simplest version is probably:

app.entry({blocks: ["views/blocks/*.{css,scss}"]})

That’s using fast-glob syntax to restrict the wildcard to matching filetypes. I don’t think you can mix path aliases and wildcards (at the very least I can say we don’t have any tests set up for that). So, just express the path relative to to resources as a string, and bud should take it from there.

You have to restrict the filetypes since you have php files in that directory. bud doesn’t know what a php file is.

Alternative: globbing

You could glob for assets:

async

await bud
  .glob("@views/blocks/*.{scss,css}")
  .then((stylesheets) => bud.entry("blocks", stylesheets));

sync

app.entry({
  blocks: app.globSync("@views/blocks/*.{scss,css}"),
})

bud.assets

assets(["images","views/blocks/**/*"])

… seems to load php files and everything into the compilation.

If you are just trying to include scss this isn’t the function you want. These files will not be processed with sass – just copied.

For the benefit of other readers, if I were trying to glob for files rather than just copy a directory, similar to the above attempt, I would specify the task with an object:

app.assets({
  from: app.path("@images/*.svg"),
  to: app.path("@dist/images"),
})
2 Likes
6

Hi @kellymears,

Thank you so much for your help with this. I installed fast-glob syntax as recommended and actually tweaked your answer to provide 2 options for others:

  1. Keeping a blocks.css file separate (in addition to app.css):
/**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
      blocks: ["views/blocks/**/*.{css,scss}"]
    })
  1. Merging blocks styles into the existing app.css to keep a single css file:
/**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app", "views/blocks/**/*.{css,scss}"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

Hope that helps, and thanks again @kellymears .