How to import an additional CSS file in theme.liquid?

Solved
rikdev
Tourist
6 0 1

Hi,

How to import an additional CSS file in theme.liquid?

I'm guessing it would be in this section:

"<script>
var theme = {
stylesheet: "{{ 'theme.scss.css' | asset_url }}",

"

what would the proper syntax be to add another stylesheet (not replacing the one that is already listed)?

 

Thanks

Matt_eman
Shopify Partner
57 3 4

The code you included appears as if you are possibly trying to lazy load the style sheet? You do not need to do this.

 

All you need to do is:

  1. Create a new scss.liquid file in your Theme/Assets Folder.
  2. Go to Theme.liquid and add this code
    1. {{ 'sheetname.scss.css' | asset_url | stylesheet_tag }}
rikdev
Tourist
6 0 1

Thanks... but do you mean simply to rename my css stylesheet to somename.scss.liquid and add the line '

  1. {{ 'sheetname.scss.css' | asset_url | stylesheet_tag }}

' anywhere in the theme.liquid code? I guess I need a little clarification.

Thanks

0 Likes
Matt_eman
Shopify Partner
57 3 4

This is an accepted solution.

No problem, happy to provide as much clarification as you need.

 

So, I wouldn't RENAME any sheet. You don't want to break anything that is currently working on your site. If you're talking about importing a NEW sheet, you want to create a new Asset file (scss.css.liquid file in the Assets folder of your theme).

 

When you creat the file, the window has you type in the file name & auto-populates the suffix by what you select from the dropdown. So lets say you select 'scss.css.liquid' & in the text field you type 'rikdev'. 

 

The file you just created is called 'rikdev.scss.css.liquid'. So to get it to load in your theme.liquid file ( meaning across the entire site ) You would include this line.

 

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

Where you include it is up to you, and how you incorporate web dev practices. More than likely, you DO NOT need it to be at the top of your theme.liquid. You would only need them at the top of Theme.liquid ( like between the <head></head> ) if the styles you are importing are critical (meaning without these, your page looks blank/white/really bad).

 

As it  is a secondary sheet, im going to assume that they are NOT critical.  Meaning you can go to the VERY VERY bottom of your Theme.liquid file, and insert that line just above the closing </body> tag. So all in all it will look like this 

 

// ..
// Bunch of code from Theme.liquid here

{{ 'rikdev.scss.css' | asset_url | stylesheet_tag }}
</body>
rikdev
Tourist
6 0 1

Thanks for taking the time... worked well!

-R

0 Likes
thomywtc
New Member
1 0 1

but, how create a new stylesheet inheriting vars from default stylesheet? no working "@use"  or "@import"

aquasar
Shopify Partner
18 2 2

How can I include a custom .scss file into the theme.scss.liquid file?

 

I guess what is the best practice and what is the recommendation by the shopify community for adding custom styles to your app?

Should the styles be added like mentioned above and then imported like so to the theme.liquid file for global custom css styles and then to each seperate .liquid file for modular css changes?

 

Thanks

 

PS. Is there a way to do hot module reloading so  I dont have to refresh the page each time using theme kit

 

Thanks

0 Likes
SvilenUkalski
Tourist
3 0 1

Hi @aquasar,
"How can I include a custom .scss file into the theme.scss.liquid file?

Hope this will help you. I have spend half of a day investigating and searching a solution for that. 

BR

 

JuanseGimenez
New Member
2 0 0

Hi @SvilenUkalski We are trying to divide a theme by sections,
 EG: divide footer SCSS from header SCSS and like that, we thought about using import in order to use the SCSS variables defined on theme.scss.liquid.
We couldn't do that with ThemeKit, we were watching Grunt but we realized that it seems it has no support anymore.
Is there any other thing we can use?
The reason why we do that is cause we are a team of some people and we are working on one Theme and it is hard to work all at the same time without having issues with theme watch, merge, and that stuff.
Thank you.

Juanse Gimenez

0 Likes
SvilenUkalski
Tourist
3 0 1

Hi @JuanseGimenez
I think it will be most helpful for everyone to create/rise new question so my answer will be easy to be found. This one is already solved and not the case of our discussion.
Paste the link for the new question as a comment here so I'll be able to find it. 
Thanks!

BR
Svilen

 

0 Likes