CSS modules not working for react version 16.6.0

Question

I was trying to use CSS Modules in React.

Here my code of App.js

import React from 'react';
import styles from './index.css'

const App = () => {
    const REACT_VERSION = React.version;

  return (
    <div>
      Main app
      <div style={styles.test}>Green</div>
      <div>Yellow</div>
      <div>React version: {REACT_VERSION}</div>
    </div>
  );
};

export default App;

Here is my code of index.css

.test {
  background: black;
  color: white;
  font-size: 34px;
  border: 34px;
}

Here is the output

I know that I have to modify

• webpack.config.dev.js
• webpack.config.prod.js

but when I read this article I could not find that code.

Answer 1

* as fixed my problem.

import * as headerStyles from './header.module.scss'

Answer 2

I had this same problem and solved it by renaming my css file to:

myName.module.css

and also importing like this:

import styles from './myName.module.css'

There is no need to follow the steps of updating the webpack files any more.