跳到主要内容

CSS Module

快速了解

CSS Module¹ 是一种 CSS 模块化方案，它允许将 CSS 代码封装到单独的文件中，并通过 JavaScript 动态加载。CSS Module 能够解决 CSS 命名冲突、代码复用和维护困难等问题。

CSS Module 的核心思想是将 CSS 代码与 HTML 代码分离，将 CSS 代码封装到单独的文件中，并通过 JavaScript 动态加载。这样，CSS 代码就可以独立于 HTML 代码进行维护和扩展。

CSS Module 支持 ES6 的模块导入语法，通过 import 关键字导入 CSS 文件。例如，假设有一个名为 styles.css 的 CSS 文件，其中包含一些样式规则，可以使用以下方式导入：

import styles from './styles.css';

在导入 CSS 文件后，可以使用 styles 对象来访问其中的样式规则。例如，可以使用 styles.backgroundColor 来访问 styles.css 文件中名为 background-color 的样式规则。

在 Taro 中开启 CSS Module

Taro 中内置了 CSS Modules 的支持²，但默认是关闭的，如需开启使用，可以在编译配置中添加如下配置：

// config/index.js
weapp: {
  module: {
    postcss: {
      // css modules 功能开关与相关配置
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module，下文详细说明
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

拓展阅读

快速了解
在 Taro 中开启 CSS Module
拓展阅读