Add custom SCSS to Shopware6.

Overview

In this article, we will learn how to add custom SCSS to Shopware6. So let’s get started.

Adding SCSS file

First, we need to create a custom SCSS file in the Shopware6 plugin directory. Make one base.scss File in the directory below.

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

Within .scss In the file, we add some basic styles to see if it really works. In this example, the background of body Will be changed.

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

Adding variables

If we want to use the same font family in many places, but only to describe it once, you can use variants for it.

Make one abstract/variables.scss File inside you <plugin root>/src/Resources/app/storefront/src/scss Create a directory and specify your font family variable.

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

Within yourself base.scss You can now import your previously defined variables to the file and use them:

@import 'abstract/variables.scss';

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

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

Now we can check if your custom styles really work on the store front. For this you have to do compiling and building. .scss First files. This is done using the following command:

./psh.phar storefront:build

If you would like to see all of your style changes live, you can also use our storefront hot proxy for this issue:

./psh.phar storefront:hot-proxy

Multi Seller Marketplace Plugin

Thanks for reading this blog, I hope it helps you. Congratulations

Write a Comment