背景
在項目使用lib-flexible還有postcss-px2rem實現移動端適配，當我們引入第三方的樣式組件庫，發現一個問題。那些組件庫的樣式都變小了。
問題原因
變小的主要原因是第三庫 css一依據 data-dpr="1" 時寫的尺寸
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
這時我們使用的flexible引入時 data-dpr不是一個寫死了的，是一個動態的；就導致這個問題
解決方式
在postcss.config.js中過濾node_modules
具體實現步驟：
第一部分：項目中引入lib-flexible
一、項目中安裝lib-flexible
npm install lib-flexible --save
二、在項目的入口main.js文件中引入lib-flexible
import 'lib-flexible'
第二部分：使用postcss-px2rem自動將css中的px轉換成rem
一、安裝postcss-px2rem
npm install postcss-px2rem --save-dev
二、項目配置postcss
項目開始在vue.config.js（項目創建完初始是沒有這個js文件的，需要自己手動創建）中配置的，上代碼
module.exports = {
css: {
loaderOptions: {
postcss: {
// 這是rem適配的配置 注意： remUnit在這里要根據lib-flexible的規則來配制，如果您的設計稿是750px的，用75就剛剛好。
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}
初始的適配方案就完成了，然后可以直接在css或.vue文件中寫已px為單位的樣式了，到瀏覽器會自動轉為rem。
but but 引入vant的組件庫后，問題來了。
試着放了一個簡單的cell組件，npm run serve項目跑起來，組件中的樣式都變小了，F12看了一下果然組件的樣式也都被轉換成了rem。
解決方案一：
將第三方組件的css文件復制出來第三方庫的css代碼px統一擴大2倍，或者用全局替換將px替換為px/*no*/。這個方案不太好，具體操作可以參考以下兩篇文章：https://segmentfault.com/a/1190000014575890 和 https://blog.csdn.net/weixin_42464312/article/details/82769805。
解決方案二：
npm uninstall postcss-px2rem --save-dev
其次，安裝postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
最后是配置exclude選項，需要注意的是這個配置在vue.config.js中式不起作用的，如圖。
正確的配置位置是項目根目錄下的postcss.config.js文件，如果你的項目沒有生成這個獨立文件，就需要在你的package.js里設置。
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
};
package.json
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude":{
"remUnit": 75,
"exclude":"/node_modules|floder_name/i"
}
}
},
本篇文字就到這里了，動手試試~