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

[flykiro]

: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

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

export default function Chats () {
    return <div className="page">
        <ToSearchBar />
        <div styleName="chat-list">
            <div styleName="a.chat-list__item">
                {/* <div styleName="chat-list__item-avatar"></div>
                <div styleName="chat-list__item-col-2">
                    <div styleName="chat-list__item-col-2-row-1">
                        <div styleName="chat-list__item-name"></div>
                        <div styleName="chat-list__item-time"></div>
                    </div>
                    <div styleName="chat-list__item-msg"></div>
                </div> */}
            </div>
        </div>
    </div>
}

and then

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 (<anonymous>)
    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)

[XOP]

@flykiro could you please attach the babel config?

[mrwest808]

Having a similar issue with this config:

{
  plugins: [
    [
      require.resolve('babel-plugin-react-css-modules'),
      {
        generateScopedName: '[name]__[local]',
        removeImport: process.env.NODE_ENV !== 'development',
        filetypes: {
          '.scss': {
            syntax: 'postcss-scss',
          },
        },
      },
    ],
  ],
}

Having troubles resolving the styleName for the .button--primary class in the example below.

.button {
  background-color: grey;

  &--primary {
    background-color: green;
  }
}

[sthzg]

Did you try configuring https://github.com/postcss/postcss-nested under the plugins key?

"filetypes": {
  ".scss": {
    "syntax": "postcss-scss",
    "plugins": [
      "postcss-nested"
    ]
  }
}

See https://github.com/postcss/postcss-scss/issues/56 for a reference.

[mrwest808]

@sthzg That seems to have fixed it, thanks!