Add Custom SCSS in Shopware6

Overview

In this article, we learn about how to add custom SCSS in Shopware6. So let’s start.

Adding SCSS file

First of all, we need to create a custom SCSS file in the Shopware6 plugin directory. Create a base.scss file in the directory mentioned below.

<plugin root>/src/Resources/app/storefront/src/scss

Inside of the .scss file, we add some basic styles to see if it’s actually working. In this example, the background of the body will be changed.

body {
    font-family: "Inter",sans-serif;
}

Adding Variables

If we want to use the same font-family in several places, but want to define it just one time, you can use variables for this.

Start your headless eCommerce
now. Find out More

Create a abstract/variables.scss file inside your <plugin root>/src/Resources/app/storefront/src/scss directory and define your font-family variable.

// in variables.scss
$storefront-font-family: Inter",sans-serif;

Inside your base.scss the file you can now import your previously defined variables and use them:

@import 'abstract/variables.scss';

body {
    font-family: $storefront-font-family;
}

The main advantage of variables.scss is when you want to change this font family for all elements, you only have to change this variable once.

Now we can test whether your custom styles actually work on a storefront or not. For this, you have to execute the compiling and building of the .scss files first. This is done by using the following command: