已初始化vue-cli3項目
第一步:下載 postcss-pxtorem(npm i postcss-pxtorem -D)
第二步:下載 amfe-flexible(npm i amfe-flexible -S)
第三步:在main.js中引入amfe-flexible
import 'amfe-flexible/index'
第四步:新建vue.config.js,配置postcss-pxtorem
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px單位換算成rem單位
rootValue: 75, // 換算的基數(設計圖750的根字體爲75)
// selectorBlackList: ['weui', 'mu'], // 忽略轉換正則匹配項
propList: ['*']
})
]
}
}
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 爲生產環境修改配置...
} else {
// 爲開發環境修改配置...
}
}
}
第五步:重啓項目,就可以看到樣式px轉爲rem