什么是主要差异style.scss与style.module.scss？

Question

我正在使用Sass进行响应。

看起来两者都有相同的好处。本地范围，不再有冲突等。两者之间的主要区别是什么style.scss与style.module.scss

我们为什么需要.module前缀？

Answer 1

简短回答

[*.scss是普通的SCSS文件，而*.module.scss是具有CSS模块的SCSS文件。

根据repo，CSS模块为：

默认情况下，所有类名称和动画名称在本地范围内的CSS文件。

用法

下面是*.scss的用法

.item {
  display: flex;
}

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

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


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

下面是*.module.scss的用法

.item {
  display: flex;
}

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

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

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

输出

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

<!-- SCSS with Class Module will have 
     hash values suffixed to the class name -->
<div class="item-35ada5">foo bar</div>