vue中移动端使用postcss-px2rem与ui组件冲突问题
在vue移动开发中,使用px2rem-loader,会自动将px单位换算成rem,但是存在一个问题,会将第三方UI库的px单位转为rem。
·
在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"
}
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)