not fetching css

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 (
...

.....
)
}

An instance of the output from dev tools

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