{"id":51617496,"url":"https://github.com/minko-fe/postcss-pxtorem","last_synced_at":"2026-07-12T15:01:01.418Z","repository":{"id":57914532,"uuid":"526649359","full_name":"minko-fe/postcss-pxtorem","owner":"minko-fe","description":"A postcss plugin that converts px to rem.  px 转 rem 的 postcss 插件","archived":false,"fork":false,"pushed_at":"2024-04-30T08:31:19.000Z","size":794,"stargazers_count":66,"open_issues_count":2,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-25T03:28:22.695Z","etag":null,"topics":["css","postcss","postcss-pxtorem","px2rem","pxtorem"],"latest_commit_sha":null,"homepage":"https://hemengke1997.github.io/postcss-pxtorem/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/minko-fe.png","metadata":{"files":{"readme":"README-zh.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING-en.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-19T14:58:51.000Z","updated_at":"2025-10-10T07:02:11.000Z","dependencies_parsed_at":"2023-02-16T15:31:53.057Z","dependency_job_id":"a5526819-d6d3-4849-a168-1c06ecbc53ed","html_url":"https://github.com/minko-fe/postcss-pxtorem","commit_stats":{"total_commits":71,"total_committers":1,"mean_commits":71.0,"dds":0.0,"last_synced_commit":"a89d58dbfdcc914b5afb687b2278652ff0f87633"},"previous_names":["hemengke1997/postcss-pxtorem"],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/minko-fe/postcss-pxtorem","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minko-fe%2Fpostcss-pxtorem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minko-fe%2Fpostcss-pxtorem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minko-fe%2Fpostcss-pxtorem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minko-fe%2Fpostcss-pxtorem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minko-fe","download_url":"https://codeload.github.com/minko-fe/postcss-pxtorem/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minko-fe%2Fpostcss-pxtorem/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35394859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-12T02:00:06.386Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","postcss","postcss-pxtorem","px2rem","pxtorem"],"created_at":"2026-07-12T15:00:46.493Z","updated_at":"2026-07-12T15:01:01.411Z","avatar_url":"https://github.com/minko-fe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-pxtorem\n\n![npm][npm-img]\n\n\n**中文** | [English](./README.md)\n\n\u003e [PostCSS](https://github.com/ai/postcss) 插件，可以从像素单位生成 rem 单位\n\n**如果你不需要以下新特性，可以使用官方库：[postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)**\n\n## [新特性](#-关于新特性)\n\n- 在样式文件中动态重写覆盖任意 `postcss-pxtorem` 支持的选项\n- 在样式文件中动态禁用转化rem\n- **兼容vite，_解决了vite build后px转rem失败的问题_**\n\n## 安装\n\n```bash\nnpm install postcss @minko-fe/postcss-pxtorem -D\n```\n\n## 使用\n\n\u003e 像素是最容易使用的单位。它们的唯一问题是，它们不能让浏览器改变默认的 16 号字体大小。postcss-pxtorem 将每一个 px 值转换为你所选择的属性中的 rem，以便让浏览器设置字体大小。\n\n### postcss.config.js\n\n#### example\n\n```js\n// postcss.config.js\nimport pxtorom from '@minko-fe/postcss-pxtorem'\n\nexport default {\n  plugins: [\n    pxtorom({\n      rootValue: 16,\n      selectorBlackList: ['some-class'],\n      propList: ['*'],\n      atRules: ['media'],\n      // ...\n    }),\n  ],\n}\n```\n\n### options\n\n| Name              | Type                                                                | Default | Description                                                                                        |\n| ----------------- | ------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------- |\n| rootValue         | `number` \\| `((input: Input) =\u003e number)`                            | 16      | 代表根元素的字体大小或根据 [`input`](https://api.postcss.org/Input.html) 参数返回根元素的字体大小  |\n| unitToConvert     | `string`                                                            | `px`    | 需要转化的单位，默认 `px`                                                                          |\n| unitPrecision     | `number`                                                            | 5       | 小数点后精度                                                                                       |\n| propList          | `string[]`                                                          | `['*']` | 可以从 px 改变为 rem 的属性，参考：[propList](#propList)                                           |\n| selectorBlackList | `(string \\| RegExp)[]`                                              | []      | 忽略的选择器，保留为 px。参考：[selectorBlackList](#selectorBlackList)                             |\n| replace           | `boolean`                                                           | true    | 直接在 css 规则上替换值而不是添加备用                                                              |\n| atRules           | `boolean` \\| `string[]`                                             | false   | 允许`at-rules`中转换 rem。参考 [At-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) |\n| minPixelValue     | `number`                                                            | 0       | 最小的 px 转化值（小于这个值的不转化）                                                             |\n| exclude           | `string` \\| `RegExp` \\| `((filePath: string) =\u003e boolean)` \\| `null` | null    | 忽略的文件路径。参考：[exclude](#exclude)                                                          |\n| include           | `string` \\| `RegExp` \\| `((filePath: string) =\u003e boolean)` \\| `null` | null    | 包括的文件路径，与 `exclude` 相反，优先级低于 `exclude`                                            |\n| disable           | `boolean`                                                           | false   | 关闭插件，可用于动态禁用插件                                                                       |\n| convertUnit       | `ConvertUnit` \\| `ConvertUnit[]` \\| false                           | false   | 插件处理的最后阶段转换单位                                                                         |\n\n#### propList\n\n- 值需要完全匹配\n- 使用通配符 `*` 来启用所有属性. Example: `['*']`\n- 在一个词的开头或结尾使用 `*`. (`['*position*']` will match `background-position-y`)\n- 使用 `!` 不匹配一个属性. Example: `['*', '!letter-spacing']`\n- 组合 `!` 与 `*`. Example: `['*', '!font*']`\n\n#### selectorBlackList\n\n- 如果值是字符串，它会检查选择器是否包含字符串.\n  - `['body']` will match `.body-class`\n- 如果值是正则，它会检查选择器是否与正则相匹配.\n  - `[/^body$/]` will match `body` but not `.body`\n\n#### exclude\n\n- 如果值是字符串，它检查文件路径是否包含字符串\n  - `'exclude'` will match `\\project\\postcss-pxtorem\\exclude\\path`\n- 如果值是正则，它将检查文件路径是否与正则相匹配\n  - `/exclude/i` will match `\\project\\postcss-pxtorem\\exclude\\path`\n- 如果值是函数，你可以使用排除函数返回 true，文件将被忽略\n  - 回调将传递文件路径作为一个参数，它应该返回一个 boolean\n  - `function (file) { return file.includes('exclude') }`\n\n## 关于新特性\n\n### 在 css 中，动态设置插件选项\n\n#### 整个文件禁用转换\n\n```css\n/* pxtorem?disable=true */\n.rule {\n  font-size: 15px; // 15px\n}\n```\n\n#### 设置 rootValue\n\n```css\n/* pxtorem?rootValue=32 */\n.rule {\n  font-size: 30px; // 0.9375rem\n}\n```\n\n以上只是简单的栗子，你可以在 css 文件中设置任意 `postcss-pxtorem` 支持的选项\n\n聪明的你，或许已经看出来了，`/* pxtorem?disable=true */` 很像浏览器 url query？\n没错。关于规范，只需参考：[query-string](https://github.com/sindresorhus/query-string)\n\n#### 完整例子\n\n```css\n/* pxtorem?disable=false\u0026rootValue=32\u0026propList[]=*\u0026replace=false\u0026selectorBlackList[]=/some-class/i */\n```\n\n### 在 css 中，动态禁用转换\n\n```css\n.rule {\n  /* pxtorem-disable-next-line */\n  font-size: 15px; // 15px\n}\n```\n\n如果你写 `15PX`（只要不是 `px`），插件也会忽略，因为 `unitToConvert` 默认是 `px`\n如果你希望使用 `PX` 忽略并且希望最后得到的单位是 `px`，你可以这样\n\n```js\n// postcss.config.js\nimport pxtorem from '@minko-fe/postcss-pxtorem'\n\nexport default {\n  plugins: [\n    pxtorem({\n      convertUnit: {\n        source: /px$/i,\n        target: 'px',\n      },\n    }),\n  ],\n}\n```\n\n## 搭配[modern-flexible](https://github.com/hemengke1997/modern-flexible)使用\n\n### example\n\n#### 入口函数\n```ts\nimport { flexible } from 'modern-flexible'\n\nflexible({\n  rootValue: 16,\n  distinctDevice: [\n    { isDevice: (clientWidth) =\u003e clientWidth \u003c 750, UIWidth: 375, deviceWidthRange: [375, 750] },\n    { isDevice: (clientWidth) =\u003e clientWidth \u003e= 750, UIWidth: 1920, deviceWidthRange: [1080, 1920] },\n  ],\n})\n```\n\n## ❤️ 感谢\n\n[postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)\n\n[@tcstory/postcss-px-to-viewport](https://github.com/tcstory/postcss-px-to-viewport)\n\n## 相关\n\n转换 px 至 viewport 的 postcss 插件 [postcss-pxtoviewport](https://github.com/hemengke1997/postcss-pxtoviewport)\n\n## 支持\n\n**如果这个仓库帮了你的忙，请右上角star，感谢！～ 😎**\n\n## License\n\nMIT\n\n[npm-img]: https://img.shields.io/npm/v/%40minko-fe/postcss-pxtorem.svg\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminko-fe%2Fpostcss-pxtorem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminko-fe%2Fpostcss-pxtorem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminko-fe%2Fpostcss-pxtorem/lists"}