主要的区别是什么 style.scss vs style.module.scss？

Question

我使用的是react with sass。

看起来两者都有相同的好处。本地范围，不再冲突等style.scssvsstyle.module.scss

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

Answer 1

简短回答

*.scss是正常的SCSS文件，而*.module.scss是带有CSS模块的SCSS。

根据回购协议，CSS模块为：

CSS文件，默认情况下，其中所有类名和动画名称的作用域都在本地。

这解决了键入超特定CSS类名以避免冲突的问题。再见.phone-page-contact-form-edit-card-default-button-blah-blah，你好.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">
foo bar
</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}>
foo bar
</div>
)

输出

<!-- Normal SCSS -->
<!-- it will not be transformed -->
<div class="ultra-specific-class-name_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>