简短回答

*.scss是普通的SCSS文件，而*.module.scss是带有CSS模块的SCSS文件。
根据repo，CSS模块有：
默认情况下，所有类名和动画名称的作用域都在本地的CSS文件。
这解决了输入超特定CSS类名以避免冲突的问题。再见.phone-page-contact-form-edit-card-default-button-blah-blah和hello .default-button

用法

下面是*.scss的用法

.ultra-specific-class-name_item {
  display: flex;
}

如果以常规方式使用SCSS，则必须将类名声明为字符串

// Simply import
import './foo.scss';

const App = () => (
  <div className="ultra-specific-class-name_item">
    {item}
  </div>
)

下面是*.module.scss的用法

// No need of any ultra specific classnames 
.item {
  display: flex;
}

如果将SCSS用作CSS模块，则必须像使用JS模块一样使用它们。

// import as a js module 
import styles from './foo.module.scss';

const App = () => (
  <div className={styles.item}>
    {item}
  </div>
)

输出

<!-- Normal SCSS -->
<div class="item">foo bar</div>

<!-- SCSS with Class Module -->

<!-- hash values are suffixed to the class name -->
<div class="item-35ada5">foo bar</div>

<!-- newer versions will even prefix the file name
     to the class name -->
<div class="foo__item-35ada5">foo bar</div>