# @carbonorm/rollup-plugin-postcss 中文文档

规范地址：https://npmcn.com/package/%40carbonorm/rollup-plugin-postcss/

版本：3\.0\.0
npm 元数据更新时间：2023-07-28T03:18:24.387Z
中文译文更新时间：2026-11-09T08:43:07.750Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40carbonorm/rollup-plugin-postcss
原文对照：https://npmcn.com/package/%40carbonorm/rollup-plugin-postcss/?lang=original
项目主页：https://github.com/egoist/rollup-plugin-postcss#readme
源码仓库：https://github.com/egoist/rollup-plugin-postcss

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

- 包体积（解压后）：42.5 kB，5 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=10
- 运行依赖：13 个
- peer 依赖：postcss 8\.x
- 首次发布：2023-07-28T03:18:23.695Z
- 最新版本发布：2023-07-28T03:18:24.044Z
- 近 30 天下载量：3417（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

滚动和后CSS之间的无缝集成

## 安装

```sh
npm install @carbonorm/rollup-plugin-postcss
```

也可以使用：`pnpm add @carbonorm/rollup-plugin-postcss`、`yarn add @carbonorm/rollup-plugin-postcss`、`bun add @carbonorm/rollup-plugin-postcss`

## README

# 卷起插图

[![NPM version](https://img.shields.io/npm/v/rollup-plugin-postcss.svg?style=flat)](https://npmjs.com/package/rollup-plugin-postcss) [![NPM downloads](https://img.shields.io/npm/dm/rollup-plugin-postcss.svg?style=flat)](https://npmjs.com/package/rollup-plugin-postcss) [![Build Status](https://img.shields.io/circleci/project/egoist/rollup-plugin-postcss/master.svg?style=flat)](https://circleci.com/gh/egoist/rollup-plugin-postcss) [![codecov](https://codecov.io/gh/egoist/rollup-plugin-postcss/branch/master/graph/badge.svg)](https://codecov.io/gh/egoist/rollup-plugin-postcss) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)

![](http://postcss.github.io/postcss/logo.svg "Philosopher’s stone, logo of PostCSS")

无缝融合 [滚动](https://github.com/rollup/rollup) 财务报告和审定财务报表 [邮政](https://github.com/postcss/postcss)。 。 。 .

## 安装

```bash
yarn add postcss rollup-plugin-postcss --dev
```

## 使用量

`v2.0` 支持卷起 v1 或以上,但它会打印出从卷起 v2 的已贬值的警告 .

**打破变革**数字 : `v3.0` 仅支持滚动 v2 和基于捆绑根的提取路径 在捆绑目录之外生成的文件的位置在滚动 v2 中不允许 .

```js
// rollup.config.js
import postcss from 'rollup-plugin-postcss'

export default {
  plugins: [
    postcss({
      plugins: []
    })
  ]
}
```

然后您可以使用 CSS 文件 :

```js
import './style.css'
```

注意生成的 CSS 将被注入到 `<head>` cSS 字符串也作为默认导出提供,除非 `extract: true`数字 :

```js
// Inject to `<head>` and also available as `style`
import style from './style.css'
```

它还会自动使用本地 PostCSS 配置文件.

### 提取 CSS

```js
// for v2
postcss({
  extract: true,
  // Or with custom file name, it will generate file relative to bundle.js in v3
  extract: 'dist/my-custom-file-name.css'
})

// for v3
import path from 'path'
postcss({
  extract: true,
  // Or with custom file name
  extract: path.resolve('dist/my-custom-file-name.css')
})
```

### CSS 模块

```js
postcss({
  modules: true,
  // Or with custom options for `postcss-modules`
  modules: {}
})
```

### 与萨斯/斯蒂卢斯/莱斯

安装相应的依赖 :

-   对于 `Sass` 安装 `node-sass`数字 : `yarn add node-sass --dev`
-   对于 `Stylus` 安装 `stylus`数字 : `yarn add stylus --dev`
-   对于 `Less` 安装 `less`数字 : `yarn add less --dev`

就是这样 你现在可以进口了 `.styl` `.scss` `.sass` `.less` 在您的库中的文件.

#### 进口

**仅供萨斯/斯克斯使用.**

类似于网络包装 [自动装填器](https://github.com/webpack-contrib/sass-loader#imports) 工作,您可以预置路径 `~` 以告诉此插件 `node_modules`数字 :

```sass
@import "~bootstrap/dist/css/bootstrap";
```

## 选项

### 扩展

类型 : `string[]`  
默认 : `['.css', '.sss', '.pcss']`

此插件将处理以这些扩展名结尾的文件, 并由 [自定义加载器](https://npmcn.com/package/%40carbonorm/rollup-plugin-postcss/#readme-loaders)。 。 。 .

### 插件

类型 : `Array`

PostCSS 插件 .

### 注入

类型 : `boolean` `object` `function(cssVariableName, fileId): string`

默认 : `true`

将 CSS 输入 `<head>`总是 `false` 何时 `extract: true`。 。 。 .

您也可以使用它作为选项 [`style-inject`](https://github.com/egoist/style-inject#options)。 。 。 .

也可以是一个 `function` 返回 a `string` 这是js代码.

### 提取

类型 : `boolean` `string`  
默认 : `false`

将 CSS 提取到生成 JS 文件的同一地点 `.css` 扩展名.

也可以设置为绝对路径.

### 模块

类型 : `boolean` `object`  
默认 : `false`

启用 CSS 模块或设置选项 `postcss-modules`。 。 。 .

### 自动移动

类型 : `boolean`  
默认 : `true`

自动启用 CSS 模块 `.module.css` `.module.sss` `.module.scss` `.module.sass` `.module.styl` `.module.stylus` `.module.less` 文档.

### 命名输出

类型 : `boolean` `function`  
默认 : `false`

在默认导出的同时使用命名导出 .

您可以提供一种函数来控制导出命名的生成方式 :

```js
namedExports(name) {
  // Maybe you simply want to convert dash to underscore
  return name.replace(/-/g, '_')
}
```

如果你定下来 `true`,在导入特定类名时将发生下列情况:

-   将所有破折号替换为 `$` 标记所包裹的下划线,例如:. `--` => `$__$`
-   js 用作样式类名的保护名,将通过将名称包入到 `$` 标志,如. `switch` => `$switch$`

所有被转换的名字都会在终端上记录如下:

```bash
Exported "new" as "$new$" in test/fixtures/named-exports/style.css
```

原件不会被取出,仍然可以使用 `default` 导出 :

```js
import style, { class$_$name, class$__$name, $switch$ } from './style.css'
console.log(style['class-name'] === class$_$name) // true
console.log(style['class--name'] === class$__$name) // true
console.log(style['switch'] === $switch$) // true
```

### 最小化

类型 : `boolean` `object`  
默认 : `false`

尽量减少CSS, `boolean` 或选项 `cssnano`。 。 。 .

### 来源映射

类型 : `boolean` `"inline"`

启用源映射 .

### 解析器

类型 : `string` `function`

PostCSS 解析器, 如 `sugarss`。 。 。 .

### 字符串

类型 : `string` `function`

PostCSS 字符串键.

### 语法

类型 : `string` `function`

后CSS语法.

### 执行

类型 : `boolean`

启用 PostCSS 解析支持在 `CSS-in-JS`。 。 。 .

### 配置

类型 : `boolean` `object`  
默认 : `true`

装入 PostCSS 配置文件 .

#### 配置路径

类型 : `string`

配置文件的路径, 这样我们就可以跳过搜索 .

#### 配置( c). ctx

类型 : `object`

[`ctx`](https://github.com/michael-ciniawsky/postcss-load-config#context) postCSS 配置文件的参数.

注意: 每把钥匙都通过 `config.ctx` 将在 `options` 内部 邮箱配置.

```js
// rollup.config.js
postcss({
  config: {
    ctx: {
      foo: 'bar'
    }
  }
})

// postcss.config.js
module.exports = context => {
  console.log(context.options.foo) // 'bar'

  return {}
}
```

### 改为

类型 : `string`

例如,PostCSS插件可以使用的目标 CSS 文件名提示, 正确解决路径、重新定位和复制资产.

### 使用情况

类型 : `name[]` `[name, options][]` `{ sass: options, stylus: options, less: options }`

默认 : `['sass', 'stylus', 'less']`

使用装入器,目前内置装入器为:

-   `sass` (支助) `.scss` 财务报告和审定财务报表 `.sass`(中文(简体) )
-   `stylus` (支助) `.styl` 财务报告和审定财务报表 `.stylus`(中文(简体) )
-   `less` (支助) `.less`(中文(简体) )

他们从右到左被处决.

如果你通过 `object`,然后它的财产 `sass`, (中文(简体) ), `stylus` 财务报告和审定财务报表 `less` 将 在相应的装载器中通过.

### 装载器

类型 : `Loader[]`

一组自定义加载器,检查我们的 [自动装填器](https://npmcn.com/package/%40carbonorm/rollup-plugin-postcss/src/sass-loader.js) 作为例子.

```js
interface Loader {
  name: string,
  test: RegExp,
  process: (this: Context, input: Payload) => Promise<Payload> | Payload
}

interface Context {
  /** Loader options */
  options: any
  /** Sourcemap */
  sourceMap: any
  /** Resource path */
  id: string
  /** Files to watch */
  dependencies: Set<string>
  /** Emit a waring */
  warn: PluginContext.warn
  /** https://rollupjs.org/guide/en#plugin-context */
  plugin: PluginContext
}

interface Payload {
  /** File content */
  code: string
  /** Sourcemap */
  map?: string | SourceMap
}
```

### 进口

类型 : `id => void`

检测到 CSS 文件导入时要引用的函数 .

## 许可证

麻省理工学院 [电子化](https://github.com/egoist)

## 常见问题

### @carbonorm/rollup-plugin-postcss 是什么？

滚动和后CSS之间的无缝集成

### 如何安装 @carbonorm/rollup-plugin-postcss？

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

### @carbonorm/rollup-plugin-postcss 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @carbonorm/rollup-plugin-postcss 支持 ESM 还是 CommonJS？

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

### @carbonorm/rollup-plugin-postcss 需要什么版本的 Node\.js？

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

### @carbonorm/rollup-plugin-postcss 可以商用吗？

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

### @carbonorm/rollup-plugin-postcss 的下载量有多少？

根据 npm 官方下载统计，@carbonorm/rollup-plugin-postcss 在 2026/10/09 – 2026/11/07 这 30 天内被下载 3,417 次，日均约 114 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @carbonorm/rollup-plugin-postcss 还在维护吗？

最新版本 3\.0\.0 发布于 2023/07/28（3 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/07/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。