react中css-loader模块化的问题

Question

After the css-loader is modularized, the class names are automatically renamed. After the modularization is enabled, the pseudo-elements can no longer be used. What should I do? For example: .title is renamed to .abc , the previously defined .title:after cannot be used

Answer 1

After properly configured css-loader for enabling CSS modules you must not use React className with a string. So don't use :

    <h1 className="title">

Instead you must import the CSS and use rules inside.

import styles from "./style.css";

// ...

    <h1 className={styles.title}>

In this way the generated class name will always match the hashed result.

See the CSS Modules reference for more info.