How can I set a CSS name not to be a hash in a Webpack configuration file?

Question

I just wondering why my CSS name became hash after I build and run my React + Webpack application. Is there advance configuration that I may have missed to set the CSS name as normal?

This is my Webpack configuration:

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: './app/app.jsx',
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },
    resolve: {
        alias: {
            applicationStyles: path.resolve(__dirname,'app/styles/app.css'),
            Clock: path.resolve(__dirname,'app/components/Clock.jsx'),
            Countdown: path.resolve(__dirname,'app/components/Countdown.jsx'),
            CountdownForm: path.resolve(__dirname,'app/components/CountdownForm.jsx')
        },
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    },
    devtool: 'cheap-module-eval-source-map'
};

This is the CSS name that becomes hash:

---

To be more clear, I add the source code of how I import and use the CSS on React:

import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'Countdown';
/* Import the CSS file */
import Styles from 'applicationStyles';

ReactDOM.render(
    /* Use CSS */
    <div className={Styles.box}>
        <Countdown/>
    </div>,
    document.getElementById('app')
);

Answer 1

This is what Webpack does by default to avoid identical CSS classes (from different CSS modules) to collide.

Here are three things you can do:

1: At the app level, you can add the following configuration to your Webpack to disable CSS modules. It is not recommended as it could lead to collisions and hard-to-find bugs.

options: {
    modules: false
}

2: At the file level, you can import it like this to prevent Webpack from obfuscating the class names. This is useful when importing third-party configuration libraries CSS files.

import '!style!css!golden-layout-css-base';

3: At the CSS class level, you can use :global(.your-class-name) to avoid obfuscating a specific class

:global(.container) {
  padding: 10px;
}