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 => (

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
```