Vite系列课程 | 11. Vite 配置文件中 CSS 配置（Modules 模块化篇）

正小安

已于 2024-12-24 14:24:55 修改

阅读量800

点赞数 9

分类专栏： # vite学习文章标签：前端 vite

于 2024-12-24 14:24:38 首次发布

本文链接：https://blog.csdn.net/everfoot/article/details/144693626

版权

11. Vite 配置文件中 CSS 配置（Modules 模块化篇）

由于课程讲的是 vite2 版本，所以我阅读了 vite6 中的文档，下面将结合 css.modules 的接口进行讲解

CSSModulesOptions 接口文档

interface CSSModulesOptions {
  /**
   * 用户可以自定义一个回调函数，来处理生成的 JSON 文件。
   * 该回调函数接受三个参数：
   *  - cssFileName: 当前处理的 CSS 文件名
   *  - json: 生成的类名与哈希值的映射对象
   *  - outputFileName: 生成的 CSS 文件的输出路径
   */
  getJSON?: (
    cssFileName: string,
    json: Record<string, string>,
    outputFileName: string,
  ) => void;

  /**
   * 定义 CSS Modules 的作用域行为
   * - 'local'：启用 CSS Modules，生成的类名会进行哈希化并作用于当前模块。
   * - 'global'：禁用 CSS Modules，所有类名都将是全局的，不会进行哈希化。
   */
  scopeBehaviour?: 'global' | 'local';

  /**
   * 定义哪些 CSS 文件路径需要被视为全局样式，不应用 CSS Modules。
   * 可以传入一个正则表达式数组，匹配路径中符合规则的文件。
   */
  globalModulePaths?: RegExp[];

  /**
   * 如果为 `true`，会导出所有的全局类名ÿ