开篇
在移动端开发中, 常常会用到 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
来源: http://www.jianshu.com/p/2614459192b0