Shopify Design

rikdev · ‎06-17-2019

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 · ‎06-17-2019

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>

View solution in original post

Matt_eman · ‎06-17-2019

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:

Create a new scss.liquid file in your Theme/Assets Folder.

Go to Theme.liquid and add this code

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

rikdev · ‎06-17-2019

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

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

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

Thanks

Matt_eman · ‎06-17-2019

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 · ‎06-17-2019

Thanks for taking the time... worked well!

-R

thomywtc · ‎04-14-2020

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

aquasar · ‎04-21-2020

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

SvilenUkalski · ‎04-23-2020

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

If your purpose is to extend with plain .css you can easily do that just by this code on the very bottom of your theme.scss.liquid
```
@import "custom.css";
```
"custom.css" must be created in the same assets/ directory where the theme.scss.liquid is present.
If you want to extend with .scss or .scss.liquid you can do that by creating a Sass structure in separate directory. For example "css/". That directory is not target of ThemeKit and it won't be uploaded to your Sopify store. To be able to do this you should use Gulp.
Take a look at that: http://shopify.github.io/shopify-css-import/ ; https://github.com/Shopify/shopify-css-import
I had a minor problem when triggering the "gulp watch" command and the solution is: https://timonweb.com/posts/how-to-fix-referenceerror-primordials-is-not-defined-error/

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

BR

JuanseGimenez · ‎04-23-2020

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

SvilenUkalski · ‎04-25-2020

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

astrnaut · ‎06-08-2020

As far as I can tell, this method works but is relatively outdated. I recommend checking out ThemeKit's solution: https://www.shopify.com/partners/blog/live-reload-shopify-sass.

omerrob13 · ‎04-19-2021

Hi there, thanks for the kind help!

I have tried to use the @import 'custom.css' method in the theme.css.liquid file, but it didn't worked for me.

Is this method still apply?

Shopify Design

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

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links