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

Question

我正在使用 FileName.module.scss 来设计我的反应元素，如下所示：

 // 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 没有应用于我的主要元素，有什么想法吗？谢谢！

原文由 Lamis Abouzina 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须安装 node-sass 才能使用 scss 文件。

npm 安装 node-sass –save-dev

您的代码似乎没问题，因为 React 16.8 之后您可以在不配置 webpack 的情况下使用 css 和 scss 模块。我建议您先检查您的 React 版本。如果您使用的 React < 16.8 版本，那么您必须弹出并配置您的 webpack 才能使用 css 和 scss 模块。

原文由 rohit anand 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以通过这个 文档

还有一个 SASS 预处理选项，使用 node-sass-chokidar 并将 "sass:watch": "node-sass-chokidar <scss directory> -o <compiled css directory> --watch" 添加到你的 scripts 以监控变化。

原文由 Tittoh 发布，翻译遵循 CC BY-SA 4.0 许可协议