not fetching css

[BernardA]

I can see it generates the plugin specific class names on the selectors, but it does not fetch the styles from the css file.

My configuration:

.babelrc

"plugins": [
  "@babel/plugin-proposal-object-rest-spread", 
  "@babel/plugin-transform-react-jsx",
  ["@babel/plugin-transform-runtime", {
      "useESModules": false
    }],
  "@babel/plugin-proposal-class-properties",
  "@babel/plugin-syntax-dynamic-import",
  ["react-css-modules",{
    "handleMissingStyleName": "warn"
  }]
],

webpack.config.js

    module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
            }
        },
        {
            test: /\.css$/,
            use: [
                ExtractCssChunks.loader,
                "css-loader",
                {
                    loader: "postcss-loader",
                    options: {
                        ident: "postcss",
                        plugins: (loader) => [
                            require('postcss-import')(),
                            require('postcss-preset-env')(),
                            require('autoprefixer')(),
                            require('cssnano')()
                        ]
                    }
                }
            ]
        }
    ]
},
     plugins: [
    new HardSourceWebpackPlugin(),
    new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: ['/public/dist/*.*', '/public/img-cache/*.*']
    }),
    new ExtractCssChunks( // old new MiniCssExtractPlugin( note sideEffect config on package.json for production
        {
            filename: "[name].[contenthash].css",
            chunkFilename: "[id].css"
        }
    ),
    new HtmlWebpackPlugin({
        showErrors: true,
        template: 'templates/webpack.html.twig', // base template
        filename: '../../templates/base.html.twig', // output
        inlineSource: '.(css)$' // embed all css inline
    }),
    new HtmlWebpackInlineSourcePlugin(), 
    new ManifestPlugin(),
    new InjectManifest({
        swSrc: './client/sw-src.js',
        swDest: '../sw.js',
        exclude: [/\.twig$/, /\.DS*/],
    }),
],

login.css

 .login_action {
    width: 300px;
    margin: 0 auto;
 }

.not_member {
  margin: 20px 0;
}

login.js

 import './login.css';

 render () {
 ....
 return (
    ...
      <div styleName='login_action'>
            <div styleName='not_member'></div>
      </div>
    .....
  )
 }

An instance of the output from dev tools

class="client-pages-login-___login__login_action___1ACvE"
class="client-pages-login-___login__not_member___3A7Bt"