Search code examples
htmlcssbootstrap-4sassadminlte

Extending multiple classes in scss file not working

I'm using AdminLte in my project, and in a html page I have:

<aside class="main-sidebar sidebar-dark-primary elevation-4">
<aside>

Everything works fine.

I created a custom scss file to support multiple tenants, imported scss files and I created then following style:

@import '_adminlte/node_modules/bootstrap/scss/bootstrap';
@import '_adminlte/build/scss/adminlte.raw';

.tenant-sidebar {
     @extend .main-sidebar, .sidebar-dark-primary, .elevation-4
}

so then I change my aside tag to:

<aside class="tenant-sidebar">
<aside>

However, doing this applies only the main-sidebar and elevation-4 classes. The sidebar-dark-primary class is not applied.

Is there a reason why this is happening?

Solution

  • TLDR:
    .sidebar-dark-primary class is empty in the adminlte.css

    As I saw it, sidebar-dark-primary css class doesn't have any style in the generated css file. It's only purpose is to wrap the child elements stylings like this:
    .sidebar-dark-primary .nav-sidebar.nav-legacy > .nav-item > .nav-link.active
    So when you @extend this class, there won't be any related stylings.