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

【问题标题】：How to use Sass and CSS Modules with create-react-app?如何在 create-react-app 中使用 Sass 和 CSS 模块？
【发布时间】：2020-04-28 08:44:22
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs sass create-react-app css-modules

【解决方案1】：

你可以通过这个documentation

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

npm install node-sass --save-dev

您的代码似乎没问题，因为在 React 16.8 之后，您可以在不配置 webpack 的情况下使用 css 和 scss 模块。我建议你先检查你的 React 版本。如果您使用的是 React

【讨论】：

【解决方案4】：

我看到你和我走的一样。要解决此问题，只需使用 classes.content 而不是 classes.Content

【讨论】：

【解决方案5】：

不要这样做...在您的项目按照here 描述的那样增长之后，构建时间会很长，这是一种痛苦...

【讨论】：