如何在 React 16.13.1 中启用 CSS 模块？

Question

everyone. I'm trying to watch tutorials and read articles on how to enable CSS Modules in React 16.13.1, I understand that to do this, I must run "npm run eject". which I have done, Next. I know that I have to edit the "webpack.config.js" file, However. my webpack.config.js file looks very different than those online. A snippet of my webpack.config,js file is below? so what lines must I add and where to enable CSS Modules, If you need more info. please let me know.

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
  importLoaders: 1,
  sourceMap: isEnvProduction && shouldUseSourceMap,
}),

Answer 1

Name your file styles.module.css works in CRA

Answer 2

Example you create a css file in the same folder as the js file:

MyComponent. module .css

.Mycomponent {
    padding: 10px; 
    margin: 5px;
}

MyComponent.js

import React from 'react';
import classes from "./MyComponent.module.css";

const MyComponent = () => {
    return (
        <div className={classes.Mycomponent}>
            This div needs some padding and margin
        </div>
    )
}

export default MyComponent