Hubl CSS File Structure

oevans — Mon, 18 May 2020 15:49:18 GMT

Hi all

I'm all for clean and easy to read code, especially for CSS.

I want to structure my CSS files like this:

main.css: (which is required in my base .html file)

{% include './_variables.css' %}
{% include './_mixins.css' %}
{% include './_grid.css' %}
...

_mixins.css:

{% include './mixins/_grid.css' %}
...

And in _grid.css: I want to have access to all the variables in _variables.css and all the included mixins (jinja macros) in mixins/_mixins.css.

But it's not working. I'm getting this error: "Could not resolve function 'x' " x being the function I want to call.

Should I use include or import? Neither help in this case though. This is how I structure my SCSS files when I develop in Sass, so I'm very accustomed to it.

Any pointers on this would be greatly appreciated and apologies if this is a duplicate of another post but I haven't found an answer online so far.

Thanks

Owen.

Re: Hubl CSS File Structure

Kevin-C — Thu, 28 May 2020 12:36:09 GMT

Hey @oevans

Have you got any source code and output CSS that we would see? This usually helps quite a lot!

First I would check you're output to see how the file is being compiled if at all.

Second I would check that your include paths are correct. You get this by right-clicking on the file in the design manager and clicking "Copy Public URL". I'm not sure that the directory dot notation works as this is handled on the backend to ease work for "non-technicals". *speculation*

You should use include and not import for hubl generated css.

Third I work in an almost identical structure, and have no issues. I think your issues stems from the paths.

Fourth and possibly most important when working with hubl and CSS. When you update and save a CSS partial, you will also need to save the CSS master to pull the changes through. Pretty sure the hubl does not compile automatically as it would in a local environment.

Hope this gets you going! If I can help anymore just let me know!

topic Hubl CSS File Structure in CMS Development

Hubl CSS File Structure

Re: Hubl CSS File Structure