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

Question

我正在使用 sass 进行反应。

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

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

Answer 1

简答

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

根据repo，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

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


const App = () => (
  <div className="ultra-specific-class-name_item">
    foo bar
  </div>
)

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

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

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

输出

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