CSS 使用 CSS 模块，如何从文件中导入类

在本文中，我们将介绍如何使用 CSS 模块，并从文件中导入类。

阅读更多：CSS 教程

什么是 CSS 模块

CSS 模块是一种用于组织和封装 CSS 代码的技术。它通过在每个类名前添加一个独一无二的标识符，使得类名具有局部作用域，从而避免全局类名冲突的问题。在使用 CSS 模块时，我们可以将CSS代码与相关的 HTML 或 JavaScript 文件进行关联，从而更好地组织和管理代码。

如何使用 CSS 模块

在使用 CSS 模块时，我们需要先配置相关的构建工具，如 webpack 或者 create-react-app。首先，我们需要在项目中将 CSS 模块支持打开。

在 webpack 中，我们可以使用 css-loader 来启用 CSS 模块。在 webpack 配置文件中，我们需要添加以下内容：

module: {
  rules: [
    {
      test: /.css$/,
      use: [
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    }
  ]
}

在 create-react-app 中，默认已经支持 CSS 模块。无需进行其他配置即可直接使用。

从文件中导入类

当我们在一个 CSS 文件中定义了多个类名时，需要导入这些类名时，可以使用以下语法：

import styles from './styles.module.css';

这里的 styles 是一个包含引入的 CSS 模块中类名的对象。我们可以通过该对象来访问和使用这些类名。

举个例子，假设我们有一个名为 styles.module.css 的 CSS 文件，其中定义了多个类名：

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 24px;
  color: #333;
}

我们可以通过以下方式来使用这些类名：

import styles from './styles.module.css';

function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, CSS Modules!</h1>
    </div>
  );
}

在上述代码中，我们从 styles.module.css 文件中导入了类名，并在 JSX 中使用了这些类名。通过使用 styles 对象，我们可以确保类名的唯一性，并且方便地在组件中使用这些类名。

在 CSS 文件中使用导入的类名

在 CSS 模块中，我们可以直接在相关的 CSS 文件中使用从其他文件中导入的类名。比如，在 styles.module.css 文件中，我们可以这样使用导入的类名：

.container {
  ...
}

.title {
  composes: container;
  ...
}

在上述代码中，我们使用了 composes 关键字，将 container 类名应用到 title 类名上。通过这种方式，我们可以复用其他类名的样式，使得样式定义更加灵活和模块化。

总结

在本文中，我们介绍了如何使用 CSS 模块，并从文件中导入类名。通过使用 CSS 模块，我们可以更好地组织和管理 CSS 代码，避免全局类名冲突的问题。通过导入类名，我们可以方便地在组件中使用这些类名，并且在 CSS 文件中灵活地使用其他类名的样式。使用 CSS 模块可以提高代码的可读性和可维护性，是一个值得尝试的技术。

希望本文对你理解和使用 CSS 模块有所帮助！