You can place SCSS partials in the subdirectories of styles/, and all the partials into theme.scss. When setting up the SCSS folder structure (the example below is just showing styles), it might look something like this: If you’re unfamiliar with these concepts, I urge to you read more about them they are great best practices for building scalable systems. We use a combination of SMACSS guidelines, and BEM CSS naming conventions. In the case where you want to set up your own SCSS structure for a theme with live reloading, I suggest using a similar approach to how we build themes at Shopify. If you’ve never set up a SCSS project before you might want to learn about SCSS first. Setting up brand new SCSS files and directories in a themeįor those already familiar with SCSS, this should make some sense. In the example above, custom.css is the name of the new CSS file you wish to link into your existing theme. In the of your markup, add in the following code, after the original stylesheet: To add an additional custom CSS file, simply go into the layout directory, and locate the theme.liquid file. For small tweaks to the existing theme, I suggest adding an additional stylesheet for your changes, or appending changes to the CSS at the bottom of the original CSS file.
To customize an existing theme, you’ll need to either add in a new stylesheet or amend an existing one. This ensures that the changes you make directly to a CSS file, whether through Prepros SCSS compilation or direct editing, are tracked and then synced to Shopify’s servers and your store. The final step with Theme Kit is to run the theme watch command. I’m going to cover two ways of using live reloading with Shopify Themes with regular old CSS files, and with Sass (SCSS) compilation. To do this you can follow the instructions provided through the Theme Kit tutorial. For this tutorial, we’ll use a few different tools: Theme Kit, the command line, a text editor of your choice, and Prepros.īefore we get into hooking up live reloading with Prepros, you’ll need to have already set up Theme Kit with the theme you will be working on. In this tutorial we will take you through integrating Prepros into a Theme Kit development workflow, step-by-step, so you no longer need to manually reload your browser to see changes. It takes time, and time is something we all wish we had more of. No one likes refreshing their browser every time you make a change to HTML, CSS, and JS during development.
0 kommentar(er)
