Maintainers
Shopify Integration SASS
Introduction
Integrating SASS (Syntactically Awesome Style Sheets) into a Shopify project allows developers to use powerful features of CSS preprocessing. SASS offers features such as variables, mixins, nesting, and modular CSS, which can enhance your ability to manage and organize styles in a more maintainable way.
In this guide, we will walk you through the process of setting up SASS in your Shopify project. By the end of this document, you’ll be able to leverage SASS to create more organized and scalable CSS for your Shopify theme.
Important To Take Into Account
In most cases, Shopify themes that support SASS come with the SRC folder already included when you download the theme. This is because Shopify's base structure does not allow you to add custom folders directly. Therefore, the SRC folder might be present even if it's initially empty.
The folder structure and its inclusion are handled by Shopify when you download the theme, ensuring that you have the necessary structure in place. However, the SASS configuration and build setup will need to be managed separately according to the instructions provided in this documentation.
By using the npm run build command, you ensure that the SASS files are compiled automatically and integrated into the assets directory without the need for manual folder creation.
Prerequisites
Before you can integrate SASS into your existing Shopify project, ensure that the following prerequisites are met:
- Node.js 18.20+ : we recommend using NVM. Some existing projects may require oldest version of Node.
- Shopify CLI : Make sure you have the latest version of Shopify CLI installed. You can install or update it using npm:
npm install -g @shopify-cli/cliUpdate Vite Configuration
Modify your vite.config.js file to include SASS support. The main configuration for Vite does not need significant changes, but it is good to make sure that the .scss files are handled properly. You can copy the configuration from the repository:
git clone https://github.com/minnek-digital-studio/shopify-template.gitRefer to the vite.config.js file in the cloned repository for the SASS setup and adapt it to your existing project as needed:
Compile SASS to CSS
Make sure that your SASS file compiles correctly to a CSS file. With the command:
npm run buildProject Structure
Here's how you can structure your project after copying the src folder into the root directory. The updated structure will look like this:
├── assets
│ ├── ysw-main.min.css
├── src
│ ├── modules
│ ├── sass
│ │ ├── global
│ │ ├── sections
│ │ ├── snippets
│ │ └── utilities
│ └── main.ts
├── vite.config.js
├── package.json
└── README.mdAdding CSS to the theme.liquid file
Once the CSS file is in the assets directory, you must reference it in the theme.liquid file of your Shopify theme to ensure that it loads in your store.
- Open the
theme.liquidfile in the Shopify theme editor. - Locate the appropriate place within the
<head>of your HTML file to include the CSS. - Add the following line of code to load the CSS file with the preload tag:
{{- 'ysw-main.min.css' | asset_url | stylesheet_tag: preload: true -}}Last Steps
- Install Dependencies: Run
npm installto install any necessary dependencies. - Run Vite: Start your development server with
npm run devto see the changes in action.
Interested to join the team?
Learn more about our recruitment process and open positions.