vue-cli 2:
- 安裝插件yarn或者npm
yarn add postcss-pxtorem
- 編輯項(xiàng)目根目錄下.postcss.js文件(沒有則新建一個(gè))
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-pxtorem": { // 此處為添加部分
rootValue: 32, // 對應(yīng)16px 適配移動(dòng)端750px寬度
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
}
}
}
vue-cli 3:
項(xiàng)目下新建vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px單位換算成rem單位
rootValue: 32, // 換算的基數(shù)(設(shè)計(jì)圖750的根字體為32)
selectorBlackList: ['weui', 'mu'], // 忽略轉(zhuǎn)換正則匹配項(xiàng)
propList: ['*']
})
]
}
}
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
} else {
// 為開發(fā)環(huán)境修改配置...
}
}
}