How to use SCSS with Shopify CLI for Themes

Рет қаралды 5,596

2 жыл бұрын

skl.sh/2MCrJIE
7-day free trial for new Skillshare.com users
Wanna go deeper into Shopify Theme Development? Join my mastermind community.
shopifythemedeveloper.com/
Episode Overview
-----------------------------
In March of this year, I published a video describing how to use Sass with Themekit following Shopify’s announcement that they were deprecating Sass from Shopify themes.
Then in July 2021, Shopify announced that the CLI had been extended to work with themes and it became the new recommended tool for local theme development. Soon enough, you guys started to ask the question: how do you create a Sass workflow with the new Shopify CLI for themes?
So, in this video I’m gonna show you how we can apply a similar build process as we did with Themekit but this time, with the Shopify CLI.
Links Mentioned
----------------------------
"How to use SCSS with Shopify Themekit"
• How to use SCSS with S...
"How to use Github with Shopify"
• How to use Github with...
"Shopify CLI for Theme Development"
• Shopify CLI for Theme ...
Check out my stuff online...
My Skillshare.com channel:
www.skillshare.com/r/profile/...
My travel channel:
/ christhefreelancer
My website:
christhefreelancer.com
My socials:
Instagram: / christhefreelancer
Facebook: / christhefreelancer
Twitter: / chrisrdodd

Пікірлер: 45

@AdityaSingh-qc6js 2 жыл бұрын

Love your Channel, just got a Front-End Development Job and I am required to learn Shopify first, and your tutorials are a lifesaver.

@moshezfania8042 2 жыл бұрын

Same here, I received a task from my new job to create an app on shopify and this channel helped me so much. Great content and a great teacher, thanks you!

@zacharystudio Жыл бұрын

this is extremely helpful, and very straightforward. thanks a million.

@ahmedraza9672 2 жыл бұрын

Thank you sir, as always your fan from Pakistan. God bless you. You are amazing.

@philsole 2 жыл бұрын

If you do "shopify theme pull" (to get phantom theme editor changes) it will delete package.json or any other .json file in the root or custom folder. You can avoid that by using the --nodelete flag. Shopify documentation says "The Shopify GitHub integration only supports the default Shopify theme folder structure" and recommends separate source code and compiled code branches. This approach seems pretty confusing so I wondered if you'd looked into that? Maybe the git subtree approach they suggest?

@CodewithChristheFreelancer 2 жыл бұрын

Hmm interesting. I think I may have noticed that but when I go to commit I just ignore those changes. That's a good point though!

@matguthrie Жыл бұрын

Very useful. Thanks

@bsewall 2 жыл бұрын

Amazing video, Chris. Thanks so much for creating it! I'm curious if you have any videos or posts about 1) Your Shopify setup in VS Code (extensions, preferred themes, etc) and 2) Migrating from Online Store 1.0 to 2.0 and if you can use Themekit CLI with 1.0 themes.

@CodewithChristheFreelancer 2 жыл бұрын

Hi MrBrady. To answer your questions: 1) - GitLens by GitKraken - Liquid by Νίκος - SCSS Style Tag by Νίκος - Potion Theme by Νίκος - GraphQL Script Tag by Νίκος, and - Markdown Script Tag by Νίκος are my currently installed extensions but the only one I definitely use is the Liquid one. 2) kzfaq.info/get/bejne/erVpfbiIkpy7fmw.html (and yes, apparently you can use Themekit with JSON Templates)

@bsewall 2 жыл бұрын

@@CodewithChristheFreelancer Thanks so much!

@bsewall 2 жыл бұрын

@@CodewithChristheFreelancer I see Shopify has an official VS Code extension. Have you had any good/bad experiences with it?

@CodewithChristheFreelancer 2 жыл бұрын

I don't recall ever using that one.

@beckysolomon8281 2 жыл бұрын

Chris, thanks so much for making this video! It was super helpful. Do you have a specific workflow for custom JS file? I was thinking it would be nice to incorporate JS Linting, for example, into the gulp build.

@CodewithChristheFreelancer 2 жыл бұрын

Not at this stage Becky.

@slayerd52 2 жыл бұрын

Great Video Chris, thanks. One question. Why do you think that the file structure changed for css files? Why do you think that they are now separated in this way vs just using one file for all styles?

@CodewithChristheFreelancer 2 жыл бұрын

I'm assuming it's so that all CSS is not loaded each time when certain parts are only required for certain sections.

@dromich Жыл бұрын

Separated way, much better

@benjaminshrimpton1 8 ай бұрын

Do you have a video about using the GITHUB integration, because the moment the Theme is duplicated by the admin user, the Github connection is broken, making it useless. Do you have a workflow for this?

@ChristheFreelancer 8 ай бұрын

Yep - kzfaq.info/get/bejne/bZiEhtp5qs7KdKc.htmlsi=7BkSPrGo4aLB-oqP

@ahmedmobin2469 2 жыл бұрын

Chris, can you share your views, why shopify creates multiple css files and includes separately in each section? For example the have added separate css files in Featured collections. And if we add multiple featured collections inside the same page then it will load it's css only once or multiple times?

@CodewithChristheFreelancer 2 жыл бұрын

Hey Ahmed. I believe they do this to make sure only the relevant CSS is loaded. Loading the same CSS file multiple times on the page concerned me too but I think that it must have a negligible effect on load times with the power of caching.

@KyleBarber07 2 жыл бұрын

Hi Chris, have you had any luck getting HMR working with sass and the CLI serve command? The Shopify CLI serve command supports hot module reloading for css files but it only seems to work when css asset files are edited and saved directly. When the css files are generated on save via sass it seems to cause a hard page reload.

@CodewithChristheFreelancer 2 жыл бұрын

Ah perhaps because the whole CSS gets regenerated. Not sure but that does suck!

@tigerlily-1 2 жыл бұрын

Compiled scss to css file it works well. In browser im getting message that source map file is missing. Can you please tell me how to fix source map file using gulp?

@CodewithChristheFreelancer 2 жыл бұрын

What's the exact error message?

@abhijitkesh 2 жыл бұрын

Thanks Chris, your video is very helpful. What will happen if someone changes the CSS file from the editor then the SCSS file doesn't track those changes, So when run gulp sass command locally CSS changes are deleted? Please suggest

@CodewithChristheFreelancer 2 жыл бұрын

Yes. That is why you should not edit CSS directly if you're using SCSS in your workflow. If you really need to edit a CSS file directly, then you can create a standalone CSS file that is not linked to any SCSS.

@abhijitkesh 2 жыл бұрын

@@CodewithChristheFreelancer Thanks for your suggestion.

@Raihan004 2 жыл бұрын

Hi, do you know, how can I use asset data? like {{ 'image.png' | asset_url }} while using shopify-cli

@CodewithChristheFreelancer 2 жыл бұрын

The same way you would using Themekit or via the Online Store editor, by placing the asset in the assets folder.

@hodayamirr 2 жыл бұрын

Hey! I'm doing your course in skillshare, and obviously, it's quite confusing to learn the old version on new version files. do you know if it is possible to open a new store but have the files as the old version so I can learn the basics on it? thank you!

@CodewithChristheFreelancer 2 жыл бұрын

Are you talking about how the course mainly talks about Debut yet Dawn is the new default theme?

@hodayamirr 2 жыл бұрын

@@CodewithChristheFreelancer ok I see now that I have the option to choose Debut as a theme so I can now finally follow along and learn, thank you for the help!

@CodewithChristheFreelancer 2 жыл бұрын

Yep! If you wanna follow along with the same theme, just install Debut.

@BurritoBrooks 2 жыл бұрын

This was great!! I am trying to migrate an entire website that has (PHP, CSS, and Javascript). After doing the steps in this video, is it just copy and paste or do I have to delete some of the code that came with the Shopify theme?

@CodewithChristheFreelancer 2 жыл бұрын

Not sure what you mean here

@BurritoBrooks 2 жыл бұрын

@@CodewithChristheFreelancer I got the source code to a website design that I like but it doesn’t have any e-commerce on it. It doesn’t have liquid. I’m trying to turn certain sections into product sections. I’m also trying to figure out how to add my custom php and css to be the theme of the website. Seems like I can’t just throw my current code in there but have to follow some shopify specific rules.

@CodewithChristheFreelancer 2 жыл бұрын

Well yeah. You definitely can't throw PHP into a theme but you can adapt existing HTML/CSS/JS

@BurritoBrooks 2 жыл бұрын

@@CodewithChristheFreelancer Ok! I have an audio player in my design but I think I’ll have to find a work around for that.

@IvanDurst Жыл бұрын

@@BurritoBrooks it will take quite a lot of work to convert a static HTML theme to a Shopify theme, as you've probably figured out :)

@slayerd52 Жыл бұрын

Is it possible to create a *.css.liquid file with gulp?

@CodewithChristheFreelancer Жыл бұрын

You mean combine multiple css files into one using Gulp? Absolutely.

@slayerd52 Жыл бұрын

@@CodewithChristheFreelancer I mean create CSS.liquid files so we can use liquid variables