Do you have to @import a file with placeholders in order to be able to use them in a separate file?

[brandondurham]

My setup:

modals.css

@define-placeholder header {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    margin-right: 24px;
}

@define-placeholder title--h1 {
    font-size: 20px;
    line-height: em(20/20);
}

authentication.css

@import "modals.css";

.content--modal {
    .header {
        @extend header;
    }

    .title--h1 {
        @extend title--h1;
    }
}

Is that @import "modals.css"; necessary in authentication.css or is there another more global way to make these placeholders available?

[gavinmcfarland]

I know you opened this issue a while ago. But thought maybe I could explain a bit. If you are using a loader like webpack or rollup there might soon be a way to accomplish this by passing a dependency to through the loader so that you don't need to import variables or classes like this for this feature.

I opened an issue with postcss-loader for this very request.

https://github.com/postcss/postcss-loader/issues/417