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')
);

score 14 · Answer 1 · edited Nov 02 '21 at 23:00

14

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;
}

edited Nov 02 '21 at 23:00

Peter Mortensen

30,738
21
105
131

answered Nov 01 '17 at 10:08

klugjo

19,422
8
57
75

1

i got an ERROR when i tried number 2. This is the message : `You may need an appropriate loader to handle this file type.` – Rido Nov 01 '17 at 10:18
3

i tried number 1 and 3 as well. The css didn't work. – Rido Nov 01 '17 at 10:23
1

the third one is the best! thanks – Mohammad Mostafa Dastjerdi Mar 31 '22 at 18:28

score 6 · Answer 2 · edited Nov 02 '21 at 23:03

In your Webpack configuration, the CSS loader needs a configuration for prefixed names. Basically localIdentName:'[local]' sets the pre-fixer as the local class name only.

For detailed info, you can look at the documentation for CSS Loader

 module: {
    rules: [

        {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        localIdentName:'[local]'
                    }
                }
            ]
        }
    ]
}

score 2 · Answer 3 · edited Nov 02 '21 at 23:05

The class name can be combined with an auto-generated hash using the localIdentName option of CSS Modules by setting it to [local]_[hase:base64:5].

[local] here refers to the class name.

[hash:base64:5] means generate a Base64 hash string of length 5.

{
  test: /\.css$/,
  use: [
     'style-loader',
     {
       loader: 'css-loader',
       options: {
         modules: {
           localIdentName: '[local]_[hash:base64:5]'
         }
      }
   ]
}

By setting the css-loader modules options to an object, you're essentially setting modules to true, but with specific options.

Setting the localIdentName to [local] completely defeats the purpose of using CSS Modules.

unless you're just maintaining references for 3rd party libraries — Richard Tyler Miles, Aug 30 '22 at 17:14

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

3 Answers3

Linked