If one is using vanilla CSS with @import, what is the recommended way to handle that with Hugo — and without PostCSS, if that’s possible?
After seeing this week’s WebKit announcement about CSS nesting for selected browsers, I’m thinking ahead about how to convert a Sass multi-file workflow to totally vanilla CSS. My early experimentation has yielded no good results. I’ve had no success putting the files in assets/ and using resources.Get *either with or without toCSS) so Hugo Pipes would change the site when any of the related CSS changes). I assume I’m missing a step somewhere.
Or does Hugo simply not support processing vanilla CSS that way?
(And I apologize for not having a repo to view; am experimenting within my main repo without committing anything yet.)
@import is a CSS directive, not a Hugo one. It’s the browser who does the import, or rather loading. Which requires attention to directories and paths when using Hugo so that it puts the file where the browser is looking for them.
We do have the inlineImports option in the PostCSS filter which I find works great when used with TailwindCSS. I guess that also makes it a Hugo thing. Also, SCSS has another way of handling imports, which I guess is also a “Hugo thing”.
Thinking about it, we should consider pulling the code for the inline imports out into its own filter. I guess that would be generally useful.