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

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

- Lamis Abouzina

Answer 1

要处理scss文件，您需要安装node-sass。

npm install node-sass --save-dev

由于React 16.8之后的版本可以使用css和scss模块而无需配置webpack，因此您的代码看起来很好。我建议您首先检查您所使用的React版本。如果您使用的是React版本<16.8，则需要弹出并配置webpack才能使用css和scss模块。

- rohit anand

---

"node-sass已经被弃用，请使用Dart Sass替代 - npm install sass" - Sri

Answer 2

您可以查看此文档。

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

- Tittoh

Answer 3

我看到你和我在学同一门课程。要解决这个问题，只需使用classes.content而不是classes.Content

- Boyan Stanchev

Answer 4

如果您正在使用默认支持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>

- Andus

---

这可能会导致变量遮蔽的问题（例如，如果您在组件中定义了 button，并且在您的 scss 中为名为 .button 的类定义了样式）。 - Marceli Wac

Answer 5

不要这样做...当您的项目像这里描述的那样变得庞大时，将会导致巨大的构建时间痛苦...

- Cobi

---

这很有趣。我完全不知道。 - Brent