# vite-plugin-rpx2rem

> A Vite plugin for converts px(rpx) to rem in css/less/js/jsx files

Latest version **1.0.5** (published 2023-10-12) · 0 weekly downloads

## Install

```sh
npm install vite-plugin-rpx2rem
pnpm add vite-plugin-rpx2rem
yarn add vite-plugin-rpx2rem
bun add vite-plugin-rpx2rem
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-10-12 |
| First published | 2023-10-12 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 4.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jiqishoubi |
| Keywords | rem, transform, rpx, px, mobile, H5, converts, vite-plugin |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-rpx2rem
- Repository: https://github.com/jiqishoubi/vite-plugin-rpx2rem
- Homepage: https://github.com/jiqishoubi/vite-plugin-rpx2rem#readme
- Issues: https://github.com/jiqishoubi/vite-plugin-rpx2rem/issues
- npm.io page: https://npm.io/package/vite-plugin-rpx2rem

## Dependencies (11)

- [less](https://npm.io/package/less.md) ^4.2.0
- [mobx](https://npm.io/package/mobx.md) ^6.10.2
- [husky](https://npm.io/package/husky.md) ^8.0.3
- [react](https://npm.io/package/react.md) ^18.2.0
- [prettier](https://npm.io/package/prettier.md) ^2.5.1
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [mobx-react](https://npm.io/package/mobx-react.md) ^9.0.1
- [@types/node](https://npm.io/package/@types/node.md) ^20.8.3
- [lint-staged](https://npm.io/package/lint-staged.md) ^14.0.1
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.16.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2023-10-12
- 1.0.4 — 2023-10-12
- 1.0.3 — 2023-10-12
- 1.0.2 — 2023-10-12
- 1.0.1 — 2023-10-12
- 0.0.3 — 2023-10-12

## README

# vite-plugin-rpx2rem

A Vite plugin for converts rpx to rem

## Install

```shell
$ npm install vite-plugin-rpx2rem --save-dev
```

## Usage

Write CSS style in rpx units

### setp 1. setHtmlFontSize

setHtmlFontSize in your entry file, and pass the design width of your project

```tsx
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.less'
import { setHtmlFontSize } from 'vite-plugin-rpx2rem'

setHtmlFontSize(750) // 750 is the design width of your project

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
```

### setp 2. vite.config.ts

Note that it should be placed on top of other plugins, so that it occurs before Babel compilation

```ts
import rpx2rem from 'vite-plugin-rpx2rem'

const config = {
  plugins: [
    rpx2rem({
      include: [path.resolve(__dirname, 'src')],
    }), // 这个要放在 react() 前面
    react(),
  ],
}
```

### setp 3. write css style in rpx units

```css
/* css */
.test_size {
  box-sizing: border-box;
  border: 1rpx solid red;
  margin: 20rpx;
  height: 100rpx;
}
```

```tsx
// tsx
const Dom = (
  <div
    className={styles.test_size}
    style={{
      fontSize: '20rpx',
    }}
  >
    test px rem
  </div>
)
```

## Options

| property | 说明 | 类型                   | 默认值 |
| -------- | ---- | ---------------------- | ------ |
| include  |      | `(RegExp \| string)[]` | -      |
| exclude  |      | `(RegExp \| string)[]` | -      |

## Remark

maybe you need set body font-size after setHtmlFontSize() in your entry file

---
_Source: https://npm.io/package/vite-plugin-rpx2rem · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._