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

Commencez par la configuration de .babelrc et webpack.config.js, puis comparez l’importation CSS dans login.js avec login.css et la sortie générée affichée dans le rapport. Exécutez le build concerné et vérifiez si la feuille de styles importée est émise et appliquée aux noms de classes générés. Le travail est terminé lorsque les styles de login.css sont récupérés et appliqués aux deux éléments rendus.