Couldn't resolve some "scss" syntax such as this ?

``` scss

:local

.chat-list{
background: red;
min-height: 200px;
&__item{
padding: 20px 30px;
background: lightcoral;
display: flex;
&-avatar{
width: 80px;
height: 80px;
background: lightgoldenrodyellow;
}
&-col-2{
flex: 1;
&-row-1{
display: flex;
}
}

}
}
```

use
``` jsx
import a from './style.scss'
console.log(a)

export default function Chats () {
return

}
```
and then
``` console
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: CSS module does not exist: chat-list__item
at getClassNameForNamespacedStyleName (D:\angle\task-mobile-web\node_modules\babel-plugin-react-css-modules\dist\getClassName.js:47:13)
at styleNameValue.split.filter.map.styleName (D:\angle\task-mobile-web\node_modules\babel-plugin-react-css-modules\dist\getClassName.js:68:14)
at Array.map ()
at exports.default (D:\angle\task-mobile-web\node_modules\babel-plugin-react-css-modules\dist\getClassName.js:66:6)
at exports.default (D:\angle\task-mobile-web\node_modules\babel-plugin-react-css-modules\dist\resolveStringLiteral.js:23:56)
at PluginPass.JSXElement (D:\angle\task-mobile-web\node_modules\babel-plugin-react-css-modules\dist\index.js:193:48)
at newFn (D:\angle\task-mobile-web\node_modules\@babel\traverse\lib\visitors.js:193:21)
at NodePath._call (D:\angle\task-mobile-web\node_modules\@babel\traverse\lib\path\context.js:53:20)
at NodePath.call (D:\angle\task-mobile-web\node_modules\@babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (D:\angle\task-mobile-web\node_modules\@babel\traverse\lib\path\context.js:88:12)
```