Is it possible to import other .scss.liquid file within a .scss.liquid file?

Store Design
,
1

Hey, currently I have a custom.scss.liquid file which I added to my theme.liquid file like this

{{ 'custom.scss.css' | asset_url | stylesheet_tag }}

Now I want to structure my code, so I created a header.scss.liquid file, which I want to import inside my custom.scss.liquid file. I tried it like this

@import "./header.scss";

and like this

@import "./header.scss.liquid";

… but that’s not working. Is this even possible?

2

HI @phillip12
in this case you can not import css file like that.
I think you can copy code from header.scss file and paste into the custom.css file

3

Thanks for your response. Is there another way to organize the code? Having everything in one file is a bit confusing

4

Hi @phillip12
You can try to add this link into the top of header.liquid in section folder
5

This would work, but let’s imagine having 100 files like button.scss.liquid, header.scss.liquid, … this would result in multiple server requests that would slow down the website. So as far as I understand, there is no solution to import other scss (css) files into another scss file?

1 Like