步骤
1.安装依赖("postcss-pxtorem": "^5.1.1", "lib-flexible": "^0.3.2")
npm install postcss-pxtorem@5.1.1 --save-dev
npm install lib-flexible --save
2.在.umirc.ts中添加几行代码
const pxtorem = require('postcss-pxtorem');
export default defineConfig({
// ...
extraPostCSSPlugins: [
pxtorem({
rootValue: 37.5, // UI设计图宽为375px
propList: [
'*',
'!border',
'!border-top',
'!border-right',
'!border-bottom',
'!border-left',
'!border-width',
],
selectorBlackList: ['html'],
}),
],
// ...
})
3.在src/app.js中添加一行代码,若没有app.js则新建一个
import 'lib-flexible';
4.postcss-pxtorem会自动将px转换为rem,5.x版本实测有效,效果图如下: