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

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>

Answer 3

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

npm 安装node-sass --save-dev

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

Answer 4

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

Answer 5

不要这样做......在你的项目按照描述增长后，大量的构建时间是一种痛苦here......

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

How to use Sass and CSS Modules with create-react-app?

javascript

sass

reactjs

css-modules

create-react-app