@vuecl构建得项⽬下,fig.js配置,将px转化成rem 依赖包:
配置:
在项⽬根⽬录下创建 fig.js
配置如下:
plugins: [
require('autoprefixer')(),
// require('postcss-px2rem')({ remUnit: 75 })
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
});
rootValue(Number)根元素字体⼤⼩。
unitPrecision(数字)允许REM单位增长的⼗进制数。
propList(数组)可以从px更改为rem的属性。
值必须完全匹配。
使⽤通配符*启⽤所有属性。例:['*']
*在单词的开头或结尾使⽤。(['*position*']会匹配background-position-y)
⽤于!与属性不匹配。例:['*', '!letter-spacing']
将“not”前缀与其他前缀组合在⼀起。例:['*', '!font*']
selectorBlackList(数组)要忽略的选择器并保留为px。
如果value是string,则检查selector是否包含字符串。
['body']会匹配.body-class
如果value是regexp,它会检查选择器是否与正则表达式匹配。
[/^body$/]会匹配body但不会.body
replace(布尔值)替换包含rems的规则,⽽不是添加回退。
mediaQuery(布尔值)允许在媒体查询中转换px。
minPixelValue(数字)设置要替换的最⼩像素值。
需要注意的是:上述配置是脚⼿架⾃动⽣成的⽂件(并不是⾃⼰创建的),即在构建项⽬时,将babel的配置成单独的⽂件才可以,否则只能⽤下⾯这种⽅式来配置
如果再构建项⽬的时候选择将babel配置单独的⽂件,那么项⽬会⾃动⽣成:.eslintrc.js fig.js fig.js .browserslistrc 这⼏个⽂件是⽐选择配置在package.json中的js 正则替换
多出来的
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论