Wouter Schaap Posts - Answer Overflow

Wouter Schaap

•Created by Wouter Schaap on 8/17/2023 in #front-end

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:

@layer base, components, utilities

@layer components {
  @use 'components'
}

@layer base, components, utilities

@layer components {
  @use 'components'
}

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 😅

7 replies

Gaming

Programming