Skip to main content

scss in multiple files

I'm working on a custom theme and I'm accumulating a large amount of code in theme.scss. I'd like to break it out into several files. I'd also like to do that with some of the template code. I've tried to use @import "myfile.scss"; in theme.scss. It didn't work. 

Official response from

Hi Brad,

If you would like to bring other .scss files into your theme, you could use the @import directive - which works similar to how the {% include %} feature works with liquid.

First, create your separate .scss file with a name that leads with an underscore "_" and ends in ".scss", such as "_added_styles.scss"

Then, in your theme file (or other .scss file you would like to bring your code into), you would use the call

@import "added_styles";

Notice that to call the .scss file I had created, I did not include the leading underscore or the ".scss" extension (otherwise your file won't be imported correctly). 

A more complete walkthrough of the @import directive, as well as information on partials, can be found online here.

Share this post

Showing 3 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.