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.
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.
Showing 3 reactions
Sign in with
I’m still not sure how to do it with scss files. Maybe by uploading the file and then just calling it in <head>, like normal?