Compiling assets from a directory outside of /resources

bud
,
1

Hey,

I created a fork of the Sage theme that allowed me to contain all of my modules within a single Directory alongside /app. A Module might consist of ACF Blocks, Components or View Composers, along with a resource directory for views, scripts and styles.

A simplified example structure looks like this:

/app
/modules
    /module-a
        /blocks
            ModuleBlockA.php
        /resources 
            /views
            /scripts
            /styles
    /module-b
        /blocks
            ModuleBlockB.php
        /resources 
            /views
            /scripts
            /styles

The fork was using bud v6.4.3 and I was able to compile scss and js by adding the following to bud config:

app
    .setPath('@blocks', 'modules')

    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
      blocks: [app.path("@blocks/**/styles/*.scss"), app.path("@blocks/**/scripts/*.js")],
      blocksEditor: [app.path("@blocks/**/editor/*.scss"), app.path("@blocks/**/editor/*.js")]
    })

This was all working fine but I’ve since updated Sage and Bud and I’m now running into issues with this method and I’m getting the following error:

Can't resolve '/Users/g/sites/sandbox/app/public/wp-content/themes/sandbox/modules/**/styles/*.css' in '/Users/g/sites/sandbox/app/public/wp-content/themes/sandbox/resources'

I’m looking for a solution that would work regardless of number of directories within /modules and where I don’t need to individually include them? I’ve gone through other tickets and can’t find something that quite fits my needs.

Thanks,
G

2

I’m not sure if this is the answer or just some discrepancy with what was here cleaned up vs your real environment values. …

But the module paths also have resources folders, and they don’t have any editor folders.

Does this work?

...
blocks: [app.path("@blocks/**/resources/styles/*.scss"), app.path("@blocks/**/resources/scripts/*.js")],
...

In which case I also wonder if the path aliases can include the glob patterns.

1 Like
3

Hey @EHLOVader,

Yeah I simplified the directory structure, but within the module’s styles or scripts directory there can be an editor directory which are loaded for the module within the editor only.

Unfortunately that doesn’t work, I was still getting the same error. I’m assuming it’s something to do with a base url set to the root resource directory?

I managed to find a solution, but not sure if it’s actually the best way to do it as it means resetting the paths in bud.config.js which feels wrong, but I was able to get it working with the following:

app.setPath('@src', './');
app.setPath('@scripts', '@src/resources/scripts');
app.setPath('@styles', '@src/resources/styles');
app.setPath('@fonts', '@src/resources/fonts');
app.setPath('@blocks', '@src/blocks');

app.entry({
    ...
    blockStyles: await app.glob('@blocks/**/styles/*.scss'),
    blockScripts: await app.glob('@blocks/**/scripts/*.js'),
    blockEditorStyles: await app.glob('@blocks/**/styles/editor/*.scss'),
    blockEditorScripts: await app.glob('@blocks/**/scripts/editor/*.js')
})

Thanks for the help though pal :slight_smile:

2 Likes
4

Ah I see, I was trying to find the location that resources might be called, check your jsconfig.json in Sage…

It does reference it in the include paths. It also defines aliases there for most things. If you add modules to the include paths and mirror the resources folder paths you might just get it working how it is supposed to.

2 Likes
5

Hey @EHLOVader ,

Thanks for continuing to look into this - I did notice that in the jsconfig.json before my above workaround but it didn’t seem to make any difference when changing the values.

I’ll double check though and update this thread.

Thanks!