LESS instead of SASS, and globbing

I’ve built a theme for myself, based on bits from various themes, including Sage. Specifically, I’m using the webpack stuff from Sage 9. However, I’m stuck using Bootstrap 3 and LESS files.

I’m also using an “atomic” approach where I’m using a file-structure that breaks out TWIG templates, ACF “model” definition PHP files and LESS files into the typical atom/molecule/organism/page approach that, say, PatternLab uses. It’s all looking quite nice.

However, a webpack issue I can’t sort out…

I am using globby (npm module) to scan the filesystem for LESS files, rather than have them @imported from a master LESS file. It ends up with a very long JSON array in entry -> main in config.json.

However, it won’t compile! I’m making sure to put the variable definition LESS files first in the compile, but they’re not being included properly. So later LESS files crash because their variables are not defined.

What gives?!

Does anyone know why the LESS compiler wouldn’t be able to interpret properly when the LESS files are listed in this way, as a long array, rather than @imported in one master file, as is done with Sage 9, presently?!

I know this is a bit obscure, but I feel like this should not be a problem!

A

I’m not 100% sure on this but the first thing that comes to mind is, is the order of those imports correct?
What if that globby is actually listing the imports in alphabetical order? That would cause less to try evaluate a file that includes variables before those variables are included, thus crashing.

Again, not 100% sure about this but this could be one of the reasons.
Hope it helps!

Thanks Nicolo. Good thought.

I did do some console logging to be sure they’re listed in the right order in the “manifest”.

So that’s almost certainly not the problem :frowning:

A

Ah good to know :slight_smile:
The only other thing that I can think of is that probably, by passing an array of entries to the less plugin for webpack, that will compile each file singularly instead of considering them all as a whole stylesheet set.
This could be the reason why although all the files are listed correctly, they’re actually not available to one another?
I haven’t really looked into the docs for the less compiler though so, again, not sure if this is correct or not :slight_smile: