使用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

它使用js对象之类的scss文件。如何在我的项目中做到这一点？我应该设置一些webpack配置吗？有没有更简单的方法可以不破坏我基于create-react-app的项目？

Answer 1

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