Reading list Switch to dark mode

    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.
    Read 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:

    ./psh.phar storefront:build

    If you want to see all style changes made by you live, you can also use our Storefront hot-proxy for that case:

    ./psh.phar storefront:hot-proxy

    Multi-Seller Marketplace Plugin

    Thanks for reading this blog, I hope it will help you. Happy coding 🙂

    . . .
    Add a comment

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top
    I have tested and used Webkul Marketplace extension for years under Odoo and now recently also deployed it under Magento 2 and I have to say that not only the code is responsive but also the team :-) Working hard and politely on my little nerdy requests, bug fixing and customization.
    Mohamed Es Fih
    eSolutions for Business Adviser
    www.intracen.org
    Talk to Sales

    Global

    Live Chat

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home