Shopware 6 plugin: Override styles not applying in component SCSS

Question

I'm working on a Shopware 6 store and trying to override some default styles of the sw-extension-card-base component. I've created the following files:

My index.js looks like:

import template from './sw-extension-card-base.html.twig';
import './sw-extension-card-base.scss';

import deDE from './snippet/de-DE.json';
import enGB from './snippet/en-GB.json';


const {Component, Defaults} = Shopware;

Component.override('sw-extension-card-base', {
    template,
    
    snippets: {
        'de-DE': deDE,
        'en-GB': enGB
    }
});

My sw-extension-card-base.html looks like:

{% block  sw_extension_card_base_meta_date %}
    {% parent %}
    
    <div>    
        <span v-if="extension.producerName"
            class="sw-extension-card-base__meta-info-version">
         {{ $tc('sw-extension-card-base-override.general.manufacturer') }}: {{ extension.producerName }}           
        </span>
    </div>    
    <div>
        <span  v-if="extension.name"
            class="sw-extension-card-base__meta-info-version">
        {{ $tc('sw-extension-card-base-override.general.technicalName') }}: {{ extension.name }}            
        </span>        
    </div>
{% endblock %}

My sw-extension-card-base.scss looks like:

@import "~scss/variables";
@import "~scss/mixins";


.sw-extension-card-base {
    .sw-meteor-card__content .sw-meteor-card__content-wrapper {
        display: grid !important;
        grid-column-gap: 24px;
        grid-template-columns: 24px 56px 5fr 4fr auto auto;
        align-items: center;
        padding: 16px 32px;
        border: none;
    }
}

I override this line to grid-template-columns: 24px 56px 5fr 4fr auto auto; in my custom component's scss. However, my override styles are not being applied.

Answer 1

Use !important the end of the custom component's scss line you want to override. Something like:

.sw-extension-card-base {
    .sw-meteor-card__content .sw-meteor-card__content-wrapper {
        display: grid;
        grid-column-gap: 24px;
        grid-template-columns: 24px 56px 5fr 4fr auto auto !important;
        align-items: center;
        padding: 16px 32px;
        border: none;
    }
}