Вложенные классы не работают в CSS модулях с Webpack и SCSS

Question

У меня есть следующая конфигурация Webpack:

module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    rootMode: 'upward',
                },
            },
        },
        {
            test: /\.module\.scss$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                        localsConvention: 'camelCase',
                        importLoaders: 2,
                        modules: {
                            localIdentName: '[local]__[hash:base64:5]',
                        },
                    },

                },
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true,
                    },
                },
                { loader: 'sass-loader', options: { sourceMap: true } },
            ]
        },

, чтобы использовать CSS Модули (с css-loader).

Это работает нормально, если у меня есть что-то вроде этого, как стиль:

.red {
   background-color: red;
}

Но если у меня есть «вложенные» классы, например:

.red {
   background-color: red;

    .test {
       font-size: 20px;
    }
}

Это не работает .. (стиль в test не применяется ).

Как это исправить?

Я видел похожий старый вопрос: Вложенные классы не работают в CSS Модули с веб-пакетом

но они не опубликовали полный ответ.