How to use Sass and CSS Modules with create-react-app?

Question

I am using FileName.module.scss to style my react elements like so:

// this is my component
import React from "react";

import Aux from '../../hoc/Aux';
import classes from './Layout.module.scss';

const layout = (props) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main className={classes.Content}>
            {props.children}
        </main>
    </Aux>
);

export default layout;

This is my SCSS:

.Content {
    margin-top: 72px;
    color:red;
}

I don't know why but the scss is not being applied to my main element, any ideas? Thank you!

Answer 1

You will have to install node-sass in order to work with scss files.

npm install node-sass --save-dev

Your code seems to be alright as post React 16.8 you can use css and scss modules without configuring webpack. I would suggest you check your version of React first. If you are using a version of React < 16.8 then you would have to eject and configure your webpack in order to use css and scss modules.