amfe-flexible 和 postcss-pxtorem 可以一起使用來實現移動端的適配效果。
參考的頁面地址
vite.config.js配置
import pxtorem from 'postcss-pxtorem';
export default defineConfig({
plugins: [
vue()
],
css: {
postcss: {
plugins: [
pxtorem({
rootValue: 75, // 這裡寫設計稿的寬度/10即可,例如設計稿寬度是750px就寫75
// vant預設是37.5,如果是使用了vant的話可以像下面這樣寫
// rootValue(res) {
// return res.file.indexOf("vant") !== -1 ? 37.5 : 75;
// },
propList: ['*'], // 需要轉換的屬性,預設轉換所有屬性
selectorBlackList: [] // CSS選擇器黑名單,防止部分選擇器被轉換
exclude: /\/node_modules\//i, // 忽略包檔案轉換rem
})
]
}
}
});
遇到的問題
解決vue中安裝postcss-pxtorem外掛,報錯“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”
參考連結
postcss-pxtorem排除特定檔案和目錄
排除特定頁面
點選檢視程式碼
module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
"rootValue": 192,
selectorBlackList: [".ivu"],
minPixelValue: 2,
"propList": ["*"],
exclude: function(file) {
// 排除 src/view/home2 目錄
return /src[\\/]view[\\/]home2/.test(file);
}
}
}
}
只轉換特定檔案
點選檢視程式碼
module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
"rootValue": 192,
selectorBlackList: [".ivu"],
minPixelValue: 2,
"propList": ["*"],
exclude: function(file) {
// 排除 不是 src/view/home2 目錄的檔案
return !/src[\\/]view[\\/]home2/.test(file);
}
}
}
}