Класс расширения Postcss, объявленный в main.css

Question

У меня есть приложение React, в котором есть файл main.css с некоторыми общими классами.

В файле css компонента я пытаюсь расширить один из этих классов.postcss-extend не распознает ни один из классов, объявленных в main.css

Обратите внимание, что файл main.css НЕ импортируется в файл компонента (.jsx или.css), он включен ТОЛЬКО в файл index.jsx.

Есть ли способ сделать эту работу?

выдержки из моего webpack.config и postcss.config

postcss.config.js

plugins: {
    'postcss-import': {},
    'postcss-map': {
        basePath: './src/assets/css/variables',
        maps: [
            'colors.yml',
            'media.yml',
            'zindex.yml',
            'fonts.yml',
            'dimensions.yml'
        ]
    },
    'postcss-extend': {},
    'postcss-nested': {},
    'postcss-for': {},
    autoprefixer: {
        browsers: ['last 3 versions']
    },
    'postcss-sorting': sortingConfig,
    'css-mqpacker': {
        sort: true
    },
    'postcss-discard-comments': {}
}

webpack.config.js

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        use: [
            {
                loader: 'css-loader',
                options: {
                    minimize: true,
                    sourceMap: true,
                    importLoaders: 1
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    config: {
                        path: './postcss.config.js'
                    }
                }
            }
        ],
        fallback: 'style-loader'
    })
},