XF 2.2 Clarification on How Creating Custom .LESS Templates Work

[Digital Jedi]

I'm a little confused on how a custom .less template is supposed to work. I created this global.less template in my default style, which my custom styles all use as a parent.

While doing some tweaks today, I noticed that my edits to this template in the default style suddenly stopped applying to the default style. And I mean suddenly literally. I starting redoing this flex-box I have on my homepage, made an edit, it worked just fine. Made another edit. Nothing. The edits to .less weren't showing in the inspector.

Made an edit to the template where the HTML code is in the default style. Worked fine. But it ignores my CSS. That's when I noticed all the custom changes to that template stopped working. All the custom images I added to Forum Home? Suddenly gone.

But the thing that's really puzzling me is...it's working exactly one child style. My main style is working fine. Which is great and all. That's the one I default everyone to. But I develop global stuff in the parent style for a reason. I need that to work, too. And of course I want a lot of the same stuff working in the new child styles I make.

So, page node HTML. Works good on all styles.


global.less code there and working up until an exact moment today.


Class names are present, but nothing is visible in the inspector. No flex-wrap.


Except, yes there is. But just in this one child style.



Not super familiar with using Network Console, but as I understand it, everything should have a say 200 or 304, which is does.


So, yeah. At a loss for what I did or didn't do.

 

[Paul B]

Did you include the less template?

If calling it in another less template it's {{ include('template_name.less') }} .

If calling it in an HTML template it's <xf:css src="template_name.less" /> .

 

[Digital Jedi]

No, I didn't. I thought that was for CSS targeting a specific purpose. I thought you could create a custom template to function like an additional extra.less.

So, wait. If I haven't done that in the child style, why is it working there? I have custom images on the forum category nodes that are being loaded from that template without issue. Just in that style. I never added the call to any template.

 

[Russ]

No, I didn't. I thought that was for CSS targeting a specific purpose. I thought you could create a custom template to function like an additional extra.less.

So, wait. If I haven't done that in the child style, why is it working there? I have custom images on the forum category nodes that are being loaded from that template without issue. Just in that style. I never added the call to any template.

We're missing some details somewhere. If you created a LESS template but never called it, it's literally impossible CSS from that template is loading, child or parent. Do you have any edits to extra.less on your child style?

 

[Digital Jedi]

We're missing some details somewhere. If you created a LESS template but never called it, it's literally impossible CSS from that template is loading, child or parent. Do you have any edits to extra.less on your child style?

Look. I'm old. I forget things.

Did you include the less template?

If calling it in another less template it's {{ include('template_name.less') }} .

If calling it in an HTML template it's <xf:css src="template_name.less" /> .

So to answer your question accurately...yes. Yes I did. But not the default style. Because as I may have mentioned. I am old.