在vue移动开发中,使用px2rem-loader,会自动将px单位换算成rem,但是存在一个问题,会将第三方UI库的px单位转为rem。

引入 import 'lib-flexible'

解绝方式:

1. 将UI组件中的px全部改为PX,或者在px后加 /*no*/.

解决方案二:

首先,需要卸载项目中的postcss-px2rem。

npm  uninstall postcss-px2rem --save-dev

其次,安装postcss-p2rem-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"
      }
    }
  },

Logo

前往低代码交流专区

更多推荐