How to use SCSS with Shopify Themekit (2021)

what's up shopify developers have you heard the news shopify have announced late last year that they have decided to deprecate sas from shopify themes citing reasons such as slow load times when using the online theme editor and the fact that they are using a legacy version of sas and that upgrading would result in breaking changes to themes this means that themes containing dot scss files will continue to function and storefronts will not be affected if the theme already uses sas however they are strongly encouraging developers to migrate their sas style sheets to css style sheets or compiling their scss files outside of shopify to put it in simple terms you know that giant theme.scss file that you might have sitting in your theme well that's now going to be replaced by a single css style sheet instead no nesting no variables none of the features that shopify developers have come to rely on when coding styles but never fear this is actually a good thing for lovers of sas as it's now forcing theme developers to move their sas compilation locally where they are now able to split and organize css code into separate files and folders and to use the latest version of sas how do we do this stay tuned to find out so what we're going to cover in today's tutorial is how to create your own scss build environment locally you guys have been asking me with support for slate long gone and now scss being deprecated what do we use as our best build environment well today i'm going to show you something i came up with which combines gulp js with the node version of shopify theme kit to create a build environment that combines the benefits of scss with the simplicity of themekit so let's get started so i'm going to start this tutorial off in the usual spot my development store chris testing shop and i want to bring your attention over here to the theme library and look at these two different versions of the debut theme i'm going to show you how i found out these version numbers in just a sec but i want to show you something that is a key difference between both of these themes now this one was generated before the announcement about scss being deprecated from shopify themes and this one was created after so let's go into actions and click on edit code and what i want you to notice once it loads is in the assets folder so if i scroll down open up assets i'm going to just increase it's going to look a bit squishy but it'll be easier for you guys to see on the other end i'm going to go into assets here and look at the theme.scss.liquid file as you can see here there's already a warning saying scss support is deprecated in themes convert it to css or css.liquid for a better performing online store and theme editor okay so there's there's the topic of the video right there if i just get rid of that warning because we're aware of it you'll see that we are using a theme.scss.liquid file here in the online editor on this 16.7.0 version of debut now if i go out and then back into the other debut theme 17.10.0 and hit edit code again scroll down to assets look inside you'll see instead of a theme.scss.liquid file we have a theme.css file interestingly enough it has the same comment or what seems to be the same comment at the start but if you look at this file it's all compiled css there is no s css in here so that might seem like oh my god we can't use scss in shopify themes anymore really what it means is we can't write and edit scss in this environment anymore in the online store editor which kind of makes sense uh if you're messing about with scss you really want to do it locally anyway and in this video we're going to show you how to create a local development environment that's actually a lot nicer and configurable than what you can do right here as always i recommend you develop shopify themes locally i don't recommend going in and using these online code editors anyway unless you're doing a simple change now just before we move on i want to show you how i got these version numbers so that you can figure out what version of debu or whatever theme you're using is i just went to customize here which opens up the theme editor and as you can see i think that's actually the name i gave it you have to go into i believe theme settings or theme actions here here we go theme actions and here you can see debut and the version number just above these options edit code edit languages and all that okay but what i did was i just put that version number in the name of the theme to make it a bit easier so if we go over here just to prove that that this is 17.10.0 if i go in here go down to theme actions you'll see 17.10.0 so if you've generated a shopify store since this video has been released then you should have a version of debu which is at least that but if you're working with an older shopify store with debu on it you might have one of these versions so that's a little trick to figure out what version of the theme you're running same goes for all these other themes as well if you bought a premium theme i'm pretty sure it's the same thing so that's how you can find out the version number all right so now that we've established that let's get started creating our local build environment now what we're going to do is we're going to combine theme kit with gulp and so what we need to create is a node environment here so unlike you know using theme watch we don't need to create a package.json file there's no javascript packages it's just a command line tool whereas now we are going to use the node version sync it up with gulp and create this cool little javascript environment alright so first thing i'm going to do is i'm going to open up my vs code code editor this is what i use to write code so i'm going to go up here to new terminal you can always just open up the terminal like this or the windows equivalent and what i'm going to do is make a new directory and i'm just going to call it debu then i'm going to jump into that directory so i'll make this a bit bigger so you can see it easier i've just made a directory and then i'm changing into that directory now so as usual i'm going to set up theme kit so i'm going to run the command theme configure but before i do that just want to make sure that you're running theme kit that you actually have it installed and a way to do that is just to run theme v and here you can see all this comes up if it wasn't installed it would come up with an error instead you've got all these different options okay so what i'm going to do is run theme configure this is the way that you can generate a config file you guys should be aware of how themekit works before watching this video if not there's a few tutorials on youtube already about it i have a lesson on my skillshare channel about it but it's quite simple the documentation's online essentially what i'm going to do is run theme configure with a bunch of parameters so the usual ones i need is store so i'm going to take the store address right here next one is theme id so what i'm going to do is let's go with the latest version so the way you can find the theme id is to open up the theme in the customizer and then grab that from the url oops i forgot to put in theme.id and then we are going to find the api password so to do that you go into apps scroll down manage private apps as you can see i've already got a themekit slate connection here in order to be a bit more private i'm going to create a new private app but i've got to click this button first here we go this warning wasn't here before but i'm going to check all those boxes and hit enable create a new private app themekit connection 2 and all you need to do is make sure that the permissions allow you to read and edit theme files so there's a lot in here here we go themes read and write that's it we're going to hit save on that create the app all right and then we just copy this password up again i forgot to put the parameter password in there password equals now theme configure will run invalid theme id i think what i've done wrong here is i've missed out two dashes so i need a dash there and a dash there and a dash there run theme configure again and then let's open up that folder now here we go debu with the config.yaml file in there i'm going to do what i usually do which is ignore files and get it to ignore config settings underscore data.json that's generally a good idea but not essential to do that cool so now that i've set up config.yaml i'm going to open up the terminal again we're inside the debu theme already here and i'm going to use the regular version of themekit to download the theme okay so right now we've got a normal themekit environment it's very simple we can just run theme watch and then themekit will watch for changes i can go in and change anything and it'll upload straight to the theme all i've got to do is refresh the theme on shopify and i can see the changes so that's the normal way of doing it right that's the normal theme kit way but what we're going to do is create a javascript environment so that we can use gulp and chain it with themekit so we're still going to use themekit but the node version i've said that a few times so let's actually dive in right now and do it so i'm going to cancel out of theme kit clear that and now what i'm going to do is run npm init and that's going to create a new node project you don't have to enter any of the parameters here you can just press enter on everything and it will create a package.json file now what i want you to do is install some dependencies so the first dependency is this one at shopify dash theme kit right so you can just copy this npm install and then this will install it in your package.json file and add it to your node modules obviously this will take a bit of time to load but i will fast forward through the loading there we go two things you'll notice now if you go into your package.json file you can see a dependency with shopify theme kit in there it will have generated a package dash lock.json file don't worry about that and then now you've got this node modules folder here okay we need a few other dependencies we're going to install gulp as well so i'll go over here search for gulp js right here and we're going to follow along in this documentation a little bit as well so something that i didn't mention before is you're going to need to have node and node package manager installed so if when you do node v it doesn't come up with a version and when you go npm-v it doesn't come up with a version you need to go install those first i forgot to say that because it's been so long since i've had node installed but here's where you can install node and then you can just search npm to learn how to install npm as well but most developers should have this on their computer already so let's move on all we got to do is run the command here npm install dash dash save dev gulp it doesn't really matter whether it's a dev dependency or otherwise because none of this stuff is going to go into the production environment anyway so not a big deal whether it's a dev dependency or not all right let's go over to package.json there you can see we've installed gop so now we have the two major dependencies we need we need gulp for compiling scss and we need themekit but gob is quite modular we're going to have to install some other ones too to get gulp to actually compile the sas into css so for that we're going to install another dependency which is gulp sass so i'll do the same thing as i did before type in gulp sass into google here we go here's how you install it npm install node sas gold sas save dev all right so that's all the dependencies we need for now i might install one a little later but that is enough to get us started so before we create our scss files and then our gulp file in order to compile that scss you're going to need to make sure you've got gold cli installed i do already but if not it should be here in the quick start guide how you do that i scroll up i think it's here we go this one npm install dash dash global gulp cli so i've already got it installed so it's just gonna install again but you definitely need this tool in order to run gulp commands in the command line looks like local access has been denied so i'm going to just add sudo in front of it so you might need to do that as well it'll ask you to put in your computer password unfortunately i'm on a guest account here and do not have sudo access but i already have the tool installed so i'm just going to clear this out and to double check that you've got gulp installed you can do gulp dash v here you go i've got my cli version and my local version so make sure you have gold cli installed all right so now what we're going to do is create our scss files and for that i'm going to create a new folder here and call it styles inside the styles folder i'm going to create a new scss file called customstyles.scss and what i'm going to do in order to demonstrate we can put whatever scss we want in here but if you have a bigger project you can put whatever you want in here you can have nested folders you can just have a bunch of different scss files in here for now i'm going to just create another one as an example and say let's say we have a separate scss file for product pages so i'm going to have product page.scss now what you'll do is create some scss in here and other places and keep this as like your index all right so if you know anything about sas if you don't uh there is a class on skillshare that i've created about this but what we're going to do is import all the styles from the other files into this parent one right here assuming there's only one other one i'm going to just go product page dot scss okay so that's going to import all the styles from this one into this one right here so inside product page dot scss i'm just going to write some random s css going to create a variable called background color and let's just say red all right and then let's do something wacky like make the background color of the whole body equal to this variable up here which is going to be red all right so now we've got some scss files nothing's going to happen yet until we set up what's called a gulp file so i'm going to create a new file here and we have to call this one gulpfile.js and in this file we're going to add in some dependencies now if you get lost at any point you can always come back to the documentation i've got it up here to help me move along as well let's just follow this for a second and add in this to our gulp file so as it says we need to create a file name called gulpfile.js in our project root so we've done that right here let's add in this code this boilerplate code which basically doesn't do anything but it's just to validate that we can run gulp and then we're just going to run gulp as you can see we've got using gulp file starting finishing and it's all done it finished super quickly because there's basically nothing in here but if you didn't come up with any errors then you are ready to go all right so i'm going to remove all this code let's move along and look at how to do tasks so over here we can learn about setting up different tasks i'm not going to get into the nitty-gritty of all of this and the theory of it but essentially we can create these quote-unquote tasks and then we can run those tasks so they're basically just functions and inside these functions it'll do a range of stuff so we're going to have two tasks that we're creating today you can add as many tasks as you like to your gop.js file but for our purposes what i'm going to do is just install some dependencies first obviously we're going to need gulp itself so i'm going to require gulp and i'm also going to require theme kit of course there we go and what was our other dependency we had uh gulp sass so we're just going to do const sas equals require gobsass all right so we've got our three main dependencies there ready to go and let's actually create our first task so what our first task is going to do is actually compile all this scss down into a single css file that is going to be included in our assets folder so to start us off we need to write gulp.task and then the name of the task we're going to call this just sas and then let's put in a function as the second argument and then we're going to return gulp src and here's where we put the path of the file that we want to actually compile so from the root directory we've got styles slash custom styles dot s css and then we're going to create a new line pipe it through sas and then finally we're going to give it a destination don't worry about all these keywords and stuff once you set this up you don't really need to work on this again just take in the overall theory here and follow along i can give you guys this code if you really struggle with any of this stuff but it's pretty simple all we're doing is taking the source file here compiling it with sas and we're going to create a destination here which is going to be gulp dest assets sweep all right congratulations we've created our first gulp task all right very simple take the code run it through sas put it in our assets folder now what we can do is run that task right now so i want you to look inside the assets folder before we do this see that there's a theme.css file in there if we run gulp and then the name of the task gulp sass you'll see that we now have a new file in here customstyles.css if i click on it you'll see we've got body background color red so obviously this is a very basic example but what's happening here is proof that we can make this partial file use a variable which is indicating that we are definitely using scss it's creating this style rule which is being imported into this scss file and then that's being compiled into custom styles.css now for these styles to actually apply what we're going to have to do is of course go into our layout file and include that in our link tag so sorry there's no syntax highlighting here but we just need to look for the place where theme dot css is included which is right here and i'm just going to copy this code this link tag right here and put another reference down here i don't think we need those extra parameters and right here i'm going to change that to custom styles dot css all right now none of these changes are going live right now because i'm not actually running theme watch but it's not too much of a problem now all i need to do to get the theme to update is run theme watch and then just make any kind of change you know i usually just add a space save take away the space save again and as you can see it'll process and update the layout file and same goes for up here i'm going to put a space in save take the space out save and that'll force it to update all right so going over here to the testing shop i've got the preview already open let's refresh the page and you can see here background color on body is set to red obviously these elements are sitting above but if we actually go in and look at body you'll see right here background color red and that's coming from custom styles as we can see here all right so the next step here is to combine themekit with gulp so that we can watch both the scss and the theme files at the same time but before we do that a little bit of theory i want to make sure you guys are fully aware of what is actually a shopify theme file and what is a local file that's kind of outside the shopified environment but then ends up indirectly becoming part of the shopify theme so as you can see here this folder here styles that is not going to be uploaded to the shopify theme and i can prove that to you by going into here and we can go to edit code and have a look there is no styles folder here i want to make that clear that your shopify theme is always going to have these folders and it's not going to have any other folders this is strict but what we're doing is we're actually creating our own folders compiling it putting it into a css file in our assets folder which does become a shopify file so if we go back to our online editor here and go into assets you can see customstyles.css so i just want to be clear that the shopify environment the production environment it doesn't know of any styles folder with scss in it all it knows is this compiled css file right here and why that's important to note is because we're going to be watching what goes on inside here using gulp and we're going to be watching what happens with the actual theme files using theme and what this means also and the great thing about using this is that we can create whatever folder structure we want in here so if i wanted to go in here and create a components file or folder here and then go in here and maybe say component button dot scss as long as i go into custom styles here and include that or import that rather so it's in a nested folder so we're gonna have to do that component button there we go so i can go in here and as an example let's go back to here look for a button here's one right here if i inspect that element you can see it's got a btn class on here if i zoom in there btn you can see right there so i could just go in here create a style rule and let's just say the background color of that is going to be green and let's make that important so that it overrides all other styles now in order for this to update we're going to have to let's open up another terminal window and we're just going to have to compile that scss file again gulp sass if we go back to the other terminal you'll see that has updated custom styles and themekit recognizes that and it's updated alright so if we go back here now refresh the page scroll down you'll see the button is green all right so i just wanted to make that very clear we can do whatever we want in this styles directory as long as we get a clean css file in our assets folder it doesn't matter what we do here all right so we've got two different things we've got our local scss files that get compiled and put together by gulp and our theme files which are looked after by theme kit and uploaded to shopify hopefully that's crystal clear if not just keep going and it'll come to you eventually just wanted to drill in that theory because that's the basis of everything we're doing here and it'll allow you to kind of expand on this and maybe actually start compiling javascript all sorts of things you can put whatever you want in here just know that it's only going to be assets config layout locales section snippets that are going to go into your actual shopify theme all right so let's turn off theme kit here and what i'm going to do is create our own watch task inside gulp and it's going to be gulp.task watch let's put a function in as the second argument and then i'm going to write gulp dot watch and here is where i write the code for what it's going to watch so we're going to do styles and then there's going to be some asterisks in here so two asterisks and then an asterisk dot scss what this is doing is basically saying all the folders and subfolders inside styles look for files in there with a dot scss and no matter what their name is check for if that has changed in the second argument we're going to write gulp series and here we want to run that first task which is sas so we want it to compile the scss and then after that we're going to run a themekit command so we can do that using this syntax which will be watch and then the second argument we have our object of options and all we need to put here to get this to work is the environment the standard environment is development if you want to double check that you can just go over here to your config.yaml file whatever is here before the first colon is your environment so we go back to the gulp file and we'll put development in here alright so that should be all we need to do now i'm going to run gulp watch so we're going to run this task that we've just created and now you can see that it's starting watch so it's watching in gulp and it's also watching here using theme kit so essentially running two watches at the same time now what i'm going to do is change the background color of the button to let's say yellow i'm going to hit save on that and i want you to look down here at what the terminal is doing so hit save and as you can see it's running sas and then theme kit is processing now why is theme kit processing well essentially what we've got going on is we've changed the value here gulp has recognized it so this style here is pulling into this file which is ultimately being compiled into css and placed in the assets folder so we go over here to the assets folder click into custom dash styles.css we can see that all of that compiled scss is in this final css file and if we want to check that on the live site i'll refresh our online code editor here and as you can see those styles are in there so how cool is that now we can run both gulp and themekit at the same time through this javascript environment here are the two tasks the first task will compile the scss and the second task we'll watch so this will be the one that we run regularly when developing themes so just like we run theme watch we're running gold watch and themewatch at the same time and that allows us to write scss however we want in our local environment and have it compiled to css in an instant and upload it to our store so this is enough to compile scss into a css file that we can use in our shopify theme but in order to make it more efficient what we can do is add in an extra dependency here called gulp clean s css or gulp clean css rather so gulp clean css and what it's going to do is minify the css as well so we might as well do that assuming we've got all our non-minified code here to work on in development it's a bit nicer in production if we have it as minified but this is completely optional it's up to you whatever you want to do this this is just going to make the site slightly or the theme slightly faster if we minify our css all right so going to run this npm install gulp clean css dash dash save dev all right so that's done and now we want to add that into our list of dependencies up here const we'll just call it clean equals require gulp clean css and then what we're going to do is add it to the pipe here so after we compile it to css let's clean it up and what we're going to do is clean and then in here we put in some parameters so all i'm going to do is put in compatibility and make it compatible with ie11 that is an optional option right there um that's just what i had set up on a previous project but let's now run gulp sass see if it still works it's finished and let's have a look now at customstyles.com you'll see it's now minified so all the white space has been removed and it's all just on the one line so that's what minifying css is all about there and as always that's now part of our gulp sass task so if we run gulp watch and we make a change in here let's change the background color to green hit save on that it's going to recompile that scss into css that's going to change this file that's going to trigger theme kit watch it's going to process that upload it and now if we go to our online store the background color is now green all right so that's how we can take these modern themes the ones that we can take from our actual shopify store and create a new css file to edit the styles now unfortunately if we want to kind of break this already compiled theme.css file up into multiple components and kind of break this apart that's going to take a while that was my original idea for the video but then i realized that would take hours and hours and hours maybe that's an idea you want to do if for instance you're running an earlier version of debut so remember when we looked at the earlier version the scss hasn't been compiled into css in the actual file right here so you could maintain all of that you could break up all these different parts put them into partials compile and then it go into css so if you're starting from this point uh maybe it's worth it but usually and this is what i did in the past i started with a slate project which already had the style sheets broken up into the folder structure and then i brought that across to a project like this so as an extra optional step if you are coming from slate i'm going to show you how you would go about that right now again if you uh haven't dealt with slate in the past don't worry about this but this is for the people that are trying to go from slate to theme kit i'll show you how that would kind of work so if i go into a slate project that i have already so i'm going to open up in a new window here and here you can see the familiar structure of a slate project so it's got this src folder here that compiles into a dist folder and that's what goes up to the theme alright so as you can see here we've got a styles folder and so what we could do is just take all of these styles and then bring them over to the other project ah i didn't actually create a new window but essentially what we would do if i open up that previous project again if i go into here this was it wasn't it i could essentially replace this folder with this and then run the same command so it will compile all of this into a single file that will go into our assets folder and that's some way that you can maintain the structure of slate in your new theme kit gulp environment but the issue you're going to probably come across which is the issue i came across when i was trying this out before i started this video is if you've got liquid variables in here so like for instance where there's here we go variables.scss.liquid you've got a ton of liquid code in here and that's not going to work in this environment because your styles here are outside of the theme kit shopify theme environment as we've mentioned before it's just pure scss it's going to get compiled into css so that is a big consideration you won't be able to put variables into your scss files using this approach that is one downside of coming from slate to this so if you wanted to kind of use liquid variables you would just basically have to do it inside the templates i'm afraid because of course shopify are moving away from scss inside their themes but that's not a big deal if you want to bring those in you can always just create a new snippet put it at the top of your file with all your i guess style variables and do it that way so that is a limitation but if you are starting from a slate starting point bring this folder over the styles folder and then just attempt to remove all those liquid variables so that basically sums up how to compile scss locally and upload it as css to your shopify theme so there you have it guys you've now learned how to use scss with themekit to build shopify themes in 2021 and beyond hope you guys were able to follow along if not leave a comment below sometimes configuration can be a bit of a it's definitely not my favorite part of web development but i hope you agree once we've done what we've done today it is a lot cleaner than using slate or the online store editor and it's going to be a nicer experience moving forward so that's it for today guys remember you can always find my longer form classes on skillshare.com i'll put the link for the free trial in the description box below and i'll see you on the next video

Channel: Code with Chris the Freelancer

Views: 5,853

Keywords: Chris the Freelancer, Code with Chris the Freelancer, Web Development, Learn to Code, SCSS, Themekit, Shopify, Shopify Theme Development, CSS, Custom CSS, Gulp.js, Shopify Development, Shopify Slate

Id: nuUYLlNkGwA

Length: 37min 36sec (2256 seconds)

Published: Mon Mar 22 2021