CSS style.scss 与 style.module.scss 有什么主要区别

在本文中，我们将介绍 CSS 中的两个常见文件命名规范：style.scss 和 style.module.scss，并详细解释它们之间的主要区别。

阅读更多：CSS 教程

style.scss

style.scss 是普通的 CSS 样式表文件。在这种文件中，你可以使用标准的 CSS 语法编写样式规则，然后在 HTML 中引用该样式表。

例如，以下是一个简单的 style.scss 例子：

.container {
  margin: 20px;
  padding: 10px;
}

.button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
}

在 HTML 文件中引用 style.scss：

<link rel="stylesheet" href="style.scss">

style.module.scss

style.module.scss 是 CSS Modules 的一种实现方式。CSS Modules 是一种可以将样式作用域限制在特定模块中的 CSS 解决方案。通过使用这种方式，可以避免全局污染和样式冲突的问题。

在 style.module.scss 中，你可以使用 SCSS 语法编写样式规则，并使用类似 JavaScript 中导出和导入的语法来在其他模块中使用这些样式规则。

以下是一个简单的 style.module.scss 例子：

.container {
  margin: 20px;
  padding: 10px;
}

.button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
}

在其他模块中引用并使用 style.module.scss：

import styles from 'style.module.scss';

...

<div className={styles.container}>
  <button className={styles.button}>Click me</button>
</div>

通过在 import 语句中使用 styles 对象，你可以在 JSX 引用时指定样式类名，以确保样式只在当前模块中生效。

主要区别

命名空间：style.scss 中的样式规则在全局范围内生效，可能会造成样式冲突和全局污染。而 style.module.scss 中的样式规则作用域被限制在当前模块中，可以避免这些问题。
类名导入：style.scss 中的类名可以直接在 HTML 中使用，无需额外引入或导入。而 style.module.scss 中的类名需要通过 import 语句导入，并且使用该类名时需要在 JSX 中引用 styles 对象。
类名自动生成：在使用 style.module.scss 时，类名会自动生成一个独一无二的哈希名，以确保不同模块的样式类名不会冲突。这在大型项目中尤为有用，可以减少手动管理类名的工作。

总结

在 CSS 中，style.scss 是普通的样式表文件，样式规则在全局生效；而 style.module.scss 是 CSS Modules 的一种实现方式，可以限制样式规则的作用域，避免全局污染和样式冲突的问题。通过使用 style.module.scss，可以更好地组织和管理 CSS 样式，特别适用于大型项目。