首先我是用cli創(chuàng)建的項目
1.項目配置px轉(zhuǎn)rpx
- 安裝postcss-pxtorpx-pro
- vite.config.ts配置
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [uni()],
css: {
postcss: {
plugins: [
require('postcss-pxtorpx-pro')({
// 轉(zhuǎn)化的單位
unit: 'rpx',
// 單位精度
unitPrecision: 5,
// 不需要處理的css選擇器
selectorBlackList: [],
// 不需要轉(zhuǎn)化的css屬性
propBlackList: [],
// 直接修改px嫌术，還是新加一條css規(guī)則
replace: true,
// 是否匹配媒介查詢的px
mediaQuery: false,
// 需要轉(zhuǎn)化的最小的pixel值，低于該值的px單位不做轉(zhuǎn)化
minPixelValue: 2,
// 不處理的文件
exclude: /node_modules|components/gi,
// 轉(zhuǎn)化函數(shù)
// 視口375px
transform: (x: any) => 2 * x
})
]
}
},
resolve: {
alias: [
{
find: '@',
replacement: resolve(__dirname, 'src')
}
]
}
})
