Trouble using dynamic/generated scss class names in styleName (Could not resolve the styleName)

I use the plugin postcss-scss together with sass-loader in Webpack 4.
It works if the css class names are global and i use the normal className prop instead of styleName.
I import the .scss file at the top of my component.

The error I get is: Could not resolve the styleName 'tablet-6'.

SCSS code (Column.scss):

@import '../../../utils.scss';

.column {
  width: 100%;
}

@each $breakpoint, $value in $breakpoints {
  @for $i from 1 through $gridColumns {
    .#{$breakpoint}-#{$i} {
      width: #{$i * $gridColumnsWidth + %};
    }
  }
}

JS code (Column.js)

import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import './Column.scss'

const Column = props => (
  <div
    styleName={classNames(
      'column',
      Object.keys({
        mobile: props.mobile,
        tablet: props.tablet,
        desktop: props.desktop,
      }).map(key => props[key] && `${key}-${Number(props[key])}`),
    )}
  >
    {props.children}
  </div>
)

Column.propTypes = {
  children: PropTypes.node.isRequired,
  mobile: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  tablet: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  desktop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
}

Column.defaultProps = {
  mobile: undefined,
  tablet: undefined,
  desktop: undefined,
}

export default Column

Beginne damit, den gemeldeten Fehler von Column.js mit den generierten Klassen in Column.scss unter Verwendung des beschriebenen postcss-scss- und sass-loader-Setups zu reproduzieren. Verfolge, wie styleName importierte SCSS-Klassen auflöst, und vergleiche dies mit den generierten Breakpoint-Namen; abgeschlossen ist die Aufgabe, wenn die dynamischen Namen ohne den gemeldeten Fehler aufgelöst werden.