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

Question

我正在使用fileName.module.scss设置我的react元素的样式

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;

这是我的scss

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

我不知道为什么，但是scss没有反映我的主要元素和想法？

谢谢

Answer 1

您可以通过此documentation

还有一个使用node-sass-chokidar进行SASS预处理的选项，并将"sass:watch": "node-sass-chokidar <scss directory> -o <compiled css directory> --watch"添加到您的scripts中以监视更改。

Answer 2

如果您使用的是默认情况下支持sass的最新create-react-app，并且我认为Layout.module.scss是scss文件名。

使用import './Layout.module.scss';代替import classes from './Layout.module.scss';

然后您可以直接调用className

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