css-loader: Import error with modules mode, composes and sass

I have a project in which I have a Card and CardContainer component. The idea is that the Card can be used in isolation if desired, or multiple cards can be used inside a CardContainer which will arrange its cards in a grid and provide scrolling if necessary. In order to facilitate this, the container’s CSS needs to modify the flex attributes of its children (adding flex 1 1 auto for example).

I’m using sass (via sass-loader) and each of my component sass files imports a utils.scss a couple of directories down, which works fine without composes, but with it I am getting a file not found on the utils.scss from the file being imported for composition.

This is my directory structure:

src/
  components/
    Card.jsx
    Card.scss
    CardContainer.jsx
    CardContainer.scss
    ...
  sass/
    _utils.scss
    ...

My (simplified) Card.scss looks like this:

@import '../sass/utils';

.card {
  ...
}

My (again simplified) CardContainer.scss looks like this:

@import '../sass/utils';

.card {
    composes: card from './Card.scss';
}

.cardContainer {
  & > .card {
    ...
    margin: 0 $gutter $gutter 0;
    flex: 1 1 auto;
    width: 30%;
  }
}

The error I see is:

Module not found: Error: Cannot resolve 'file' or 'directory' ../sass/utils in <path to project>/src/components

I don’t fully understand how this all fits together but It seems to me that this mechanism is trying to resolve a js/jsx file rather than going through the sass pipeline. Does this make sense to you? It’s resolving ./Card.scss just fine - it’s the secondary import that doesn’t seem to be working.