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';
  

  具体要改为多少，看自己的需求。