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!

Dave Mackey · Accepted Answer · 2021-09-16 13:41:57Z

13

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.

edited Sep 16, 2021 at 13:41

Dave Mackey

4,45221 gold badges84 silver badges147 bronze badges

answered Aug 11, 2020 at 11:10

rohit anand

1721 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sri Over a year ago

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

Hypermona · Accepted Answer · 2024-10-06 16:29:27Z

2

If you are using Vite then it supports CSS Pre-processors. download Sass and use it.

Step1: download sass

npm i sass

Step 2: Create a Sass Module file

touch app.module.scss

/*inside app.module.scss*/
.container{
  ...
 }

Step 3: Import it and use

//inside app.tsx/jsx
import style from './app.module.scss

<!--Inside the component-->
<div className={style.container}>
  .....
</div>

edited Oct 6, 2024 at 16:29

answered Oct 4, 2024 at 10:08

Hypermona

1761 silver badge7 bronze badges

Comments

Andus · Accepted Answer · 2020-01-10 18:03:53Z

-1

If you are using the latest create-react-app which support sass by default, and I assume Layout.module.scss is a scss file name.

use import './Layout.module.scss'; instead of import classes from './Layout.module.scss';

then you may directly call the className

<main className={Content}>
 {props.children}
</main>

answered Jan 10, 2020 at 18:03

Andus

1,73917 silver badges33 bronze badges

1 Comment

Marceli Wac Over a year ago

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).

Boyan Stanchev · Accepted Answer · 2021-02-11 11:38:24Z

-1

I see you're following the same course as me. To fix the issue just use classes.content instead of classes.Content

answered Feb 11, 2021 at 11:38

Boyan Stanchev

1

Comments

Cobi · Accepted Answer · 2021-05-20 11:34:54Z

-4

Dont do it... it's a pain of huge build times after your Project grows as described here...

answered May 20, 2021 at 11:34

Cobi

1281 gold badge2 silver badges12 bronze badges

1 Comment

Brent Over a year ago

This is interesting. I had no idea.

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related