如何在 create-react-app 中使用 Sass 和 CSS 模块？

Question

i am using fileName.module.scss to style my react elements

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;

and this is my scss

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

i don't know why but scss is not reflecting onto my main element and 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 module css and scss without configuring webpack. I would suggest you to check your version of react first. If you are using prior version of react then you would have to eject and configure your webpack in order to use module css and scss.

Answer 2

You can go through this documentation

There is also an option of SASS pre-processing using node-sass-chokidar and add "sass:watch": "node-sass-chokidar <scss directory> -o <compiled css directory> --watch" to your scripts to monitor changes.

Answer 3

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>

Answer 4

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

Answer 5

不要这样做......在你的项目按照这里的描述增长之后，这是一个巨大的构建时间的痛苦......