CSS Modules don't return class

Question

I would like to install css modules into create-react-app and I came across this https://github.com/kitze/custom-react-scripts.

After setting things up, I created a test style.module.css file in my folder and import it with import styles from './style.module.css'; like so,

import React, { Component } from 'react';
import styles from './style.module.css';

console.log(styles); //returns '/static/media/style.module.b3708639.css'
console.log(styles.red); //returns 'undefined'

export default class Form extends Component {
    render = () => {
        return (
            <form onSubmit={this.handleSubmit}>
                <TextInput />
                <PasswordInput />
                <Submit />
                <p className={[styles.red, 'test'].join(' ')}>Test</p> //rendered <p class="test">Test</p>
            </form>
        );
    }

    handleSubmit = () => {
        console.log('submit!');
    } 
}

This is my style.module.css content

.facebook_button { margin-top:10px; }
.red { color:red; }

Any advise?

Answer 1

Installing the custom-react-scripts as a scripts-version from the beginning should do.

Like this:

create-react-app my-app --scripts-version custom-react-scripts

Otherwise, if installing after using CRA itself on the same app, it will give it the /static/media/ route to static files, which won't give you the styles object you expect in the files where you import it.