# @dr\.pogodin/css-modules-require-hook 中文文档

规范地址：https://npmcn.com/package/%40dr.pogodin/css-modules-require-hook/

版本：4\.7\.3
npm 元数据更新时间：2024-08-22T08:24:20.910Z
中文译文更新时间：2026-11-12T19:03:33.909Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dr.pogodin/css-modules-require-hook
原文对照：https://npmcn.com/package/%40dr.pogodin/css-modules-require-hook/?lang=original
项目主页：https://dr.pogodin.studio/docs/css-modules-require-hook
源码仓库：https://github.com/birdofpreyru/css-modules-require-hook

弃用说明：Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\.

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：33.2 kB，10 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>= 14
- 运行依赖：11 个
- peer 依赖：postcss ^8
- 首次发布：2020-04-16T19:58:13.178Z
- 最新版本发布：2023-04-09T00:34:29.582Z
- 近 30 天下载量：11448（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 0 个）

## 中文简介

飞上编译 CSS 模块的要求钩

## 安装

```sh
npm install @dr.pogodin/css-modules-require-hook
```

也可以使用：`pnpm add @dr.pogodin/css-modules-require-hook`、`yarn add @dr.pogodin/css-modules-require-hook`、`bun add @dr.pogodin/css-modules-require-hook`

## README

# CSS 模块需要钩

[![Latest NPM Release](https://img.shields.io/npm/v/@dr.pogodin/css-modules-require-hook.svg)](https://www.npmjs.com/package/@dr.pogodin/css-modules-require-hook) [![NPM Downloads](https://img.shields.io/npm/dm/@dr.pogodin/css-modules-require-hook.svg)](https://www.npmjs.com/package/@dr.pogodin/css-modules-require-hook) [![CircleCI](https://dl.circleci.com/status-badge/img/gh/birdofpreyru/css-modules-require-hook/tree/master.svg?style=shield)](https://dl.circleci.com/status-badge/redirect/gh/birdofpreyru/css-modules-require-hook/tree/master) [![GitHub Repo stars](https://img.shields.io/github/stars/birdofpreyru/css-modules-require-hook?style=social)](https://github.com/birdofpreyru/css-modules-require-hook)

需要的钩子编译 [CSS 模块](https://github.com/css-modules/css-modules) 在运行时间。 这和Babel的差不多 [贝贝尔/登记员](https://babeljs.io/docs/usage/require/)。见实例: [演示](https://npmcn.com/package/%40dr.pogodin/css-modules-require-hook/demo)。 。 。 .

[![Sponsor](https://npmcn.com/package/%40dr.pogodin/css-modules-require-hook/.README/sponsor.png)](https://github.com/sponsors/birdofpreyru)

* * *

_这是叉子 [css-moules-requere-hook (英语)](https://www.npmjs.com/package/css-modules-require-hook) 升级以依赖最新的依赖关系,并固定一些问题._

* * *

## 什么是 CSS 模块

A 类 **CSS 模块** 是一个 CSS 文件,默认情况下所有类名和动画名都会在本地范围进行。 在文章中学习更多 [CSS模块 - 欢迎来到未来](http://glenmaddern.com/articles/css-modules) 格伦·马德恩著.

## 特征

以运行时间编译, [普遍](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) 用途.

## 所需资源

为了使用我们所需要的工具 [节点.js v0.12.x](https://github.com/nodejs/node) (或更上层.

## 安装

```bash
$ npm install @dr.pogodin/css-modules-require-hook
```

## 使用量

现在,附加钩子有两种方法:手动或使用预设文件.

第一个允许您在模块需要后手动通过选项 。 示例

```javascript
const hook = require('@dr.pogodin/css-modules-require-hook');

hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]',
});

// const styles = require('./icon.css');
```

第二个允许您将选项移至单独的文件 `cmrh.conf.js`。配置文件应位于执行器所在的同一目录或其祖先目录中。 这样一来 钩子就在后面 `@dr.pogodin/css-modules-require-hook/preset` 需要模块。 示例

```javascript
// cmrh.conf.js
module.exports = {
  generateScopedName: '[name]__[local]___[hash:base64:5]',
};
```

```javascript
require('@dr.pogodin/css-modules-require-hook/preset');

// const styles = require('./icon.css');
```

### 使用 Bail-node / ES6 导入

您需要创建一个 `cmrh.conf.js` 在目录中导入文件 `@dr.pogodin/css-modules-require-hook`。 。 。 .

```javascript
// server.js
import csshook from '@dr.pogodin/css-modules-require-hook/preset' // import hook before routes
import routes from '/shared/views/routes'

// create server, etc
```

```javascript
// cmrh.conf.js
module.exports = {
  // Same scope name as in webpack build
  generateScopedName: '[name]__[local]___[hash:base64:5]',
}
```

### 开发模式

通常,Node.js会缓存所有 `require` 默认调用。 要为开发目的取消缓存, 您应该设置环境变量 `NODE_ENV` 改为 `development`。例如:

```bash
$ NODE_ENV=development node server.js
```

还可以用 `devMode` 选项(见下文)以覆盖由环境变量强制实施的行为.

### 添加自定义 PostCSS 插件

```javascript
var hook = require('@dr.pogodin/css-modules-require-hook');
var cssnext = require('cssnext');

hook({
  prepend: [
    // adding CSS Next plugin
    cssnext(),
  ],
});
```

### 指定用于构建通用名称的自定义模式

```javascript
var hook = require('@dr.pogodin/css-modules-require-hook');

hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]',
});
```

### 使用 Stylus 作为预处理器

```javascript
var hook = require('@dr.pogodin/css-modules-require-hook');
var stylus = require('stylus');

hook({
  extensions: ['.styl'],
  preprocessCss: function (css, filename) {
    return stylus(css)
      .set('filename', filename)
      .render();
  },
});

// var styles = require('./demo.styl');
```

## 调试( 选项)

要调整要求的钩子,您需要为导出函数提供参数.

```javascript
var hook = require('@dr.pogodin/css-modules-require-hook');

hook({
  // append: [],
  // generateScopedName: function () {},
  // or any other options
  // see the list below
});
```

### `devMode` 布尔

帮助您取消全部缓存 `require` 打电话 通常用于开发目的. 也超越行为 `NODE_ENV` 环境变量。 例如:

```javascript
hook({
  devMode: false,
});
```

### `extensions` 数组

将要求的勾钩附加到额外的文件扩展名( 例如 ) `['.scss']`) (中文(简体) ).

### `ignore` 函数正弦

提供了将特定文件排除在处理之外的可能性。 支持 glob 和正则表达式语法 。 您也可以提供自定义功能 .

### `preprocessCss` 函数

在罕见的情况下,您可能想要预先编译样式,然后将其传递到PostCSS管道. 你应该用 **同步** 转变,自 `require` 函数是同步的.

```javascript
hook({
  /**
   * @param  {string} css
   * @param  {string} filepath Absolute path to the file
   * @return {string}
   */
  preprocessCss: function (css, filepath) {
    return css;
  }
});
```

### `processCss` 函数

在罕见的情况下, 您可能想要在运行时获得编译样式, 因此提供此选项会有所帮助 .

```javascript
hook({
  /**
   * @param  {string} css
   * @param  {string} filepath Absolute path to the file
   */
  processCss: function (css, filepath) { /* */ }
});
```

### `processorOpts` 对象

提供将自定义选项传递给 [LazyResult 实例](https://github.com/postcss/postcss/blob/master/docs/api.md#processorprocesscss-opts)。如果想要设置自定义解析器,它可以有用,例如: [无员额](https://github.com/gilt/postcss-less)。 。 。 .

```javascript
const hook = require('@dr.pogodin/css-modules-require-hook');
const lessParser = require('postcss-less').parse;

hook({
  extensions: '.less',
  processorOpts: {parser: lessParser},
});
```

### `camelCase boolean|string`

骆驼会输出类名. 类似 [css-loader? 骆驼场](https://github.com/webpack/css-loader#camel-case)。 。 。 .

可用的选项 : `true`, (中文(简体) ), `dashes`, (中文(简体) ), `only`, (中文(简体) ), `dashesOnly`。 。 。 .

### `append` 数组

将自定义插件添加到 PostCSS 管道的末尾. 自从 `require` 函数是同步的,应当只提供同步插件.

### `prepend` 数组

预置自定义插件到 PostCSS 管道的开始. 自从 `require` 函数是同步的,应当只提供同步插件.

### `use` 数组

向管道提供 PostCSS 插件的全部列表 。 提供此取消 `append`, (中文(简体) ), `prepend`, (中文(简体) ), `createImportedName`, (中文(简体) ), `generateScopedName` 选项。 只同步插件 .

### `createImportedName` 函数

缩略名 [邮箱-模块-摘录-进口](https://github.com/css-modules/postcss-modules-extract-imports) 插头 `createImportedName` 选项.

### `generateScopedName` 字符串函数

缩略名 [邮政模块扫描仪](https://github.com/css-modules/postcss-modules-scope) 插件的选项 。 帮助您指定为类选择者构建通用名称的自定义方式. 您也可以使用类似于 Webpack 的字符串模式 [装弹机](https://github.com/webpack/css-loader#local-scope)。 。 。 .

```javascript
hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]'
});
```

或者说

```javascript
hook({
  /**
   * @param  {string} name     Usually a class name
   * @param  {string} filepath
   * @param  {string} css
   * @return {string}
   */
  generateScopedName: function (name, filepath, css) {
    return name;
  }
});
```

### `hashPrefix` 字符串

缩略名 [通用名称](https://github.com/css-modules/generic-names) 帮助选项 . 提供了额外的散列独有性. 对于多个样式表共享同名的项目可能有用 .

### `mode` 字符串

缩略名 [postcs- 模块- 本地默认](https://github.com/css-modules/postcss-modules-local-by-default) 插件的选项 .

### `resolve` 对象

改变解决ICSS进口的路径(`@value a from './b.css'` 财务报告和审定财务报表 `composes a from './b.css'`。支持:

-   `resolve.alias` `object`
-   `resolve.extensions` `array` —— 默认值 `['.css']`。 。 。 .
-   `resolve.modules` `array`
-   `resolve.mainFile` `string` —— 默认值 `'index.css'`。 。 。 .
-   `resolve.preserveSymlinks` `boolean` —— 默认值 `false`。 。 。 .

详情见: [https://github.com/cs-modules/postcs-modules-resolve-imports#可选办法](https://github.com/css-modules/postcss-modules-resolve-imports#options)

### `rootDir` 字符串

提供工程目录的绝对路径. 提供这个功能会生成更好的类名. 它可以是强制性的,如果运行需要钩并构建工具(比如: [css-模块化](https://github.com/css-modules/css-modulesify))来自不同的工作目录.

## 调试

[调试](https://www.npmjs.com/package/debug) 软件包用于调试。 所以,打开它 仅仅指定 **吉布提** 环境变量 :

-   `DEBUG=css-modules:fetch` 查看已解决的文件路径 .
-   `DEBUG=css-modules:preset` ——看是否找到配置.
-   `DEBUG=css-modules:setup` ——看新选项清单.
-   `DEBUG=css-modules:*` ——看一切处.

## 链接

-   电子支持 : [css-模块-电子](https://github.com/KenPowers/css-modules-electron)

## 许可证

> 麻省理工学院许可证

## 常见问题

### @dr\.pogodin/css-modules-require-hook 是什么？

飞上编译 CSS 模块的要求钩注意：该包已被作者标记为弃用——Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\.

### 如何安装 @dr\.pogodin/css-modules-require-hook？

在项目目录运行 npm install @dr\.pogodin/css-modules-require-hook，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：postcss（^8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dr\.pogodin/css-modules-require-hook 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/dr\.pogodin\_\_css-modules-require-hook 是否存在。

### @dr\.pogodin/css-modules-require-hook 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @dr\.pogodin/css-modules-require-hook 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>= 14。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @dr\.pogodin/css-modules-require-hook 可以商用吗？

@dr\.pogodin/css-modules-require-hook 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dr\.pogodin/css-modules-require-hook 的下载量有多少？

根据 npm 官方下载统计，@dr\.pogodin/css-modules-require-hook 在 2026/10/13 – 2026/11/11 这 30 天内被下载 11,448 次，日均约 382 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dr\.pogodin/css-modules-require-hook 还在维护吗？

最新版本 4\.7\.3 发布于 2023/04/09（3 年前）；至今共发布 15 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/04/17。作者已将其标记为弃用，新项目建议寻找替代方案。