kirklin / postcss-px-conversion

A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
https://postcss-px-conversion.vercel.app
MIT License
26 stars 2 forks source link

feat: add usage for nuxt3 #7

Open luoriwusheng-xia opened 2 weeks ago

luoriwusheng-xia commented 2 weeks ago

Proposed changes

Types of changes

What types of changes does your code introduce? Put an x in the boxes that apply

Linked Issues

Further comments

vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
postcss-px-conversion ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 27, 2024 9:37am
luoriwusheng-xia commented 2 weeks ago

本来想把 Options导出, 发现会报错,不知道为啥 ; 在 nuxt3中,本来期望使用 import {Options} from 'postcss-px-conversion'

import {Options} from 'postcss-px-conversion'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-px-conversion': {
        unitType: 'px', // 要转化的单位
        viewportWidth: 375, // UI设计稿的宽度
        unitPrecision: 10, // 转换后的精度,即小数点位数
        viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
        minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
        includeFiles: [/\/pages\//], // 如果设置了include,那将只有匹配到的文件才会被转换
        excludeFiles: [/node_modules/, /pages\/active\/index\.vue/] // 设置忽略文件,用正则做目录名匹配
      } as Options
    }
  }
})

这样提供类型提示