postcss-px2rem-exclude 和 lib-flexible的適配

  對於前端項目而言，適配是很重要的，而且有時候也是一個令人比較頭疼的問題。適配方案之一是使用rem，這里簡單總結記錄下有關px自動轉rem的兩個插件。

• postcss-px2rem-exclude
  將樣式文件中的px自動轉為 rem。執行命令：

  npm install postcss-px2rem-exclude --save
  

• lib-flexible
  該插件會自動在html的head中添加一個 meta name="viewport" 的標簽，同時會自動設置html的font-size，大概是屏幕寬度除以10，也就是 1rem 等於 html 根節點的 font-size
  注意：

  1. 檢查一下html文件的head中，如果有 meta name="viewport" 標簽，需要將他注釋掉，因為如果有這個標簽的話，lib-flexible就會默認使用這個標簽。而我們要使用lib-flexible自己生成的 meta name="viewport"來達到高清適配的效果。

  完成后，在 main.js 中引入 import 'lib-flexible'
  
  

• 使用

  1. 在項目的 vue.config.js 文件中(如果沒有則在根目錄新建一個)配置

     module.exports = {
       css: {
         loaderOptions: {
           css: {},
           postcss: {
             plugins: [
               require('postcss-px2rem-exclude')({
                 remUnit: 48,
                 exclude: '/node_modules/i',
               }),
             ],
           },
         },
       },
     };
     

     • remUnit: 設置 rem 與 px 之間的轉換關系
     • exclude：設置過濾的文件
  2. 重新運行項目即可(npm run serve)

• 設置過濾的文件
  按照上面的設置完成后，發現可以自動轉換了，但是像 element-ui 這樣的第三方組件庫，也被轉換了，這...。而且設置了過濾文件后，發現不管用。試了很多種方法，都不行，最后是修改源碼。
  修改前：

  module.exports = postcss.plugin('postcss-px2rem-exclude', function (options) {
    return function (css, result) {
      if (options.exclude && css.source.input.file.match(options.exclude) !== null) {
        result.root = css;
        return
      }
      var oldCssText = css.toString();
      var px2remIns = new Px2rem(options);
      var newCssText = px2remIns.generateRem(oldCssText);
      result.root = postcss.parse(newCssText)
    }
  });
  

  修改后：

  module.exports = postcss.plugin('postcss-px2rem-exclude', function (options) {
    return function (css, result) {
      try {
        var flag = options.exclude.includes('/')
        if (flag) {
          var arr = options.exclude.split('/')
          options.exclude = new RegExp(arr[1], arr[2])
        }
      } catch(e) {
        console.log(e)
      }
      if (options.exclude && css.source.input.file.match(options.exclude) !== null) {
        result.root = css;
        return
      }
      var oldCssText = css.toString();
      var px2remIns = new Px2rem(options);
      var newCssText = px2remIns.generateRem(oldCssText);
      result.root = postcss.parse(newCssText)
    }
  });
  

• 修改 lib-flexible 插件源碼
  如果不想頁面縮的過小，可以設置 min-width，但是也會被轉換為 rem，所以:
  在 refreshRem 方法中，將代碼修改為：

  docEl.style.fontSize = (rem > 38 ? rem : 38) + 'px';
  

  具體要改為多少，看自己的需求。