vue-cli3.0 flexible&px2rem 解決第三方ui組件庫樣式問題

背景

在項目使用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

 

1、項目中安裝lib-flexible

npm install lib-flexible --save

 

2、在項目的入口main.js文件中引入lib-flexible

import 'lib-flexible'

 

第二部分：使用postcss-px2rem自動將css中的px轉換成rem

 

1、安裝postcss-px2rem 

npm install postcss-px2rem --save-dev

 

2、項目配置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。

 

解決方案二：

使用postcss-px2rem-exclude

 

首先，須要卸載項目中的postcss-px2rem。

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"
      }
    }
  },

本篇文字就到這裏了，動手試試~