一、安装依赖走起
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev
安装成功 ,我的相关版本是
"amfe-flexible": "^2.2.1",
"postcss-pxtorem": "^6.0.0",
二、配置
在mian.js中 引入amfe-flexible
import 'amfe-flexible'
在vite.config.js中配置postcss-pxtorem
import { defineConfig } from 'vite';
import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
...
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 75, // (设计稿/10)1rem的大小
propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
})
]
}
}
})
现在就可以根据设计稿的大小写样式啦,不用转换~~~