classes not appearing in imported css objects

[jmking]

Just created a new project using react-scripts-cssmodules 1.0.142. Modifying App.js to test the css module functionality appears to show that its not working. The following is my App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import styles from './App.css';

class App extends Component {
  render() {
    return (
      <div className={styles.App}>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

If I understand correctly, the modification to the top level div should result in the App class from App.css being applied. However no css is applied. printing styles.App to the console yields undefined.

Am I missing something?

[ro-savage]

For a .css file to imported as css modules it must be named <something>.module.css.

Anything else will be imported as regular css.

Give that a go and let me know if that doesn't work.

[ro-savage]

I will update the docs once I release the next version to make it clear. Thanks for letting me know.