使用 SCSS 反应样式

Question

我正在挖掘一个 npm 项目，该项目使用 .scss 文件进行样式设置。

它导入如下样式：

import styles from './node-content-renderer.scss'

并将其用作组件类名的对象。

 <button
      type="button"
      className={styles.collapseButton}
 >

它如何像上面那样使用styles？当我在本地环境中尝试时，styles 只是{}（空对象）。即使我将node-sass 安装到我的项目中。

现有代码链接为：https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/blob/master/node-content-renderer.js

它使用scss 像js对象一样的文件。我怎样才能在我的项目中做到这一点？我应该设置一些 webpack 配置吗？有没有更简单的方法不会破坏我基于create-react-app 的项目？

Answer 1

此功能适用于react-scripts 2.0 以上版本。您应该遵循文档中的模式：https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet