Vue自动px单位自动转换rem
上期说到使用
lib-flexible + postcss-px2rem-exclude
实现px 转 rem,但是发现实现的结果是错误的,宽度根本不够,查看各种资料了解到,现在已经不使用了,现在使用的是amfe-flexible + px2rem-loader + postcss-px2rem-exclude
一、安装
1.安装px2rem-loader
amfe-flexible
postcss-px2rem-exclude
npm install px2rem-loader amfe-flexible postcss-px2rem-exclude --save
2.main.js文件中引入amfe-flexible/index.js
import 'amfe-flexible/index.js'
3.进入.postcssrc.js文件配置
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-px2rem-exclude": {
remUnit: 192, // 基准数据
exclude: /node_modules|mobile/i
}
}
}
参数说明:
remUnit
:是基准数据,举例:若设计稿的宽为1920,则该数值为192
exclude
:不对px进行转化的目录,举例:/node_modules|mobile/i 是node_modules下的文件和mobile目录下的文件css不进行转化;
最后
重新npm run dev
,每次修改以后也要重新编译,并且要重新打开新页面。
注意
1.此方法只能将.vue文件style标签中的px转成rem
,不能将script标签和元素style里面定义的px转成rem;
2.如果在.vue文件style中的某一行代码不希望被转成rem,只要在后面写上注释 /* no*/就可以了。