CSS Modules how to cascade from selector of another file?

Question

I have two files

tab.less .

tab {
    display: inline-block;
    font-size: 14px;
}

and tabs.less

.tabs {
    border-bottom: 1px solid @grey;

    .tab {
        margin-right: 24px;
    }
}

The question is how to import selector from another file because now css-loader generates two different selectors what is good, but I need to tell it that there should be selector from another file. Thanks.

Answer 1

Try to use composition.

tab.less

.tab {
    display: inline-block;
    font-size: 14px;
}

tabs.less

.tabs {
    border-bottom: 1px solid @grey;

    .tab {
        composes: tab from './tab.less';
        margin-right: 24px;
    }
}

Also check this article with most popular and useful cases with css-modules – http://andrewhfarmer.com/css-modules-by-example/#example-5-composition