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!

Solution

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.

Comments

[Marceli Wac]

This can create the problems in the form of variable shadowing (for example, if you had button defined in your component, and the styles defined for class called .button in your scss).

[Sri]

node-sass has been deprecated. Use the dart sass instead - npm install sass

[Brent]

This is interesting. I had no idea.