How to extend a class from an imported SCSS?

shared.scss:

.gridContainer {
    display: grid;
    background-color: #efefef;
}

my-component.scss

@import url("../../../shared.scss");
.contentWrapper {
   @extend .gridContainer
}

When extending to .gridContainer from angular component scss(my-component.scss) I'm getting this error. The import is fine here. Is it possible to extend like this? If not how to access the class or variable from the shared.scss?

ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: The target selector was not found. Use @extend .gridContainer !optional to avoid this error.`