SCSS @use with @layer.
So I'm setting up a project and I'm looking to use @layer to implement ITCSS. I've worked with it before, but it's been a while and I can't find an example project implementing it.
I want to have a
style.scss file that combines a bunch of my ITCSS folders into the final CSS file:
However the example provided above is not a correct usage of this technique. It keeps shouting at me @use should always live at the highest lines in my file.
Inside my SCSS folders, in this example components, there is usually a file called index.scss and some component files called _component-x.scss _component-y.scss. (These are just examples).
I can't quite figure out where I am to declare @layer components within this structure. Should I define it at the component file level? Should it live in index.scss which gives me the same issue as in my style.scss.
Somehow it feels a bit redundant and error prone to have to remember to wrap the code inside every _component-{x}.scss in an @layer block. If that's what's needed I'll do it, but I'd like to know if there's a better way.
Hope my question is clear 😅3 Replies
Aaand silence 🙂
We have to be a little more verbose to get it to work
using
@include meta.load-css is almost the exact same thing as @use, but you can use it anywhere instead of only at the top. It also just loads in the css, so you can't use that, and then use a function that's inside that file, but you aren't looking to do that anyway, so this should work fine.
Also, if you're layers all share the same name as the files themselves, you could probably make a loop that does it all too... not sure if it's worth the effort if you only have like 4 or 5 of them though 😅@kevinpowell thnx, nah want to keep things legible, found that unless I generate things that are prone to change often I rather write it out.