javascript - 如何在 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

您必须安装 node-sass 才能使用 scss 文件。
npm install node-sass --save-dev
在 React 16.8 之后，您的代码似乎没问题，您可以在不配置 webpack 的情况下使用 css 和 scss 模块。我建议你先检查你的 React 版本。如果您使用的是 React < 16.8 的版本，那么您必须弹出并配置您的 webpack 才能使用 css 和 scss 模块。