Vue移动端程序员Vue

vue移动端中使用lib-flexible和px2rem,再引入

2019-03-17  本文已影响1068人  风中凌乱的男子

开篇

在移动端开发中,常常会用到rem相对单位来做自适应。最常用到一种方法就是使用lib-flexible和px2rem来做到自动转换px单位。具体方法参考上一篇文章(px2rem-loader(Vue:将px转化为rem,适配移动端))。

相对缺陷

但是,这个方法是有缺陷的,当引入第三方UI库时,会发现第三方的UI库的样式也自动转化成rem了。所以样式会变小。

解决方法:

其实解决方法很简单,让其不转化成rem就可以了。但是怎么做到呢,请往下看。

使用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.jsmodule.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"

      }

    }

  },

最后别忘了把之前配置过的信息删掉。在build-utils.js下,如图:

ok,完成。

以上就是我这个项目的填坑经历,希望对你有用,能少走点弯路 o(*^@^*)o

上一篇下一篇

猜你喜欢

热点阅读