npm i postcss-loader autoprefixer@8.0.0
// 需要使用include属性:
npm i https://github.com/evrone/postcss-px-to-viewport --save-dev
// 不需要使用include属性:
npm install postcss-px-to-viewport --save-dev
const autoprefixer = require('autoprefixer')
const pxtoviewport = require('postcss-px-to-viewport')
module.exports = {
plugins: [
autoprefixer(), // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
pxtoviewport({
unitToConvert: "px", // 要转化的单位
viewportWidth: 1980, // UI设计稿的宽度
viewportHeight:1080,
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw
selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名,
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
// include: [/Robot/], // 设置需要使用的文件
landscape: false // 是否处理横屏情况
})
]
};
需要使用include属性的引用资源命令:
npm i https://github.com/evrone/postcss-px-to-viewport --save-dev
❌官方给出的指定文件方法不生效:include: /\/src\/mobile\//
✅ 需要引用mobile文件中所有文件: include: /mobile/
;
✅ 需要引用多个文件:include: [/mobile/, /Robort/]
✅需要引用mobile文件下的dialog1,dialog2文件:include: [/dialog1/, /dialog2/]
unitToConvert
(String) 需要转换的单位,默认为"px"
viewportWidth
(Number) 设计稿的视口宽度
unitPrecision
(Number) 单位转换后保留的精度
propList
(Array) 能转化为vw的属性列表
viewportUnit
(String) 希望使用的视口单位
fontViewportUnit
(String) 字体使用的视口单位
selectorBlackList
(Array) 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
minPixelValue
(Number) 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
mediaQuery
(Boolean) 媒体查询里的单位是否需要转换单位
replace
(Boolean) 是否直接更换属性值,而不添加备用属性
exclude
(Array or Regexp) 忽略某些文件夹下的文件或特定文件,例如’node_modules’ 下的文件
include
(Array or Regexp) 如果设置了include,那将只有匹配到的文件才会被转换,例如只转换 ‘src/mobile’ 下的文件 (include: //src/mobile//)
landscape
(Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit
(String) 横屏时使用的单位
landscapeWidth
(Number) 横屏时使用的视口宽度
exclude和include是可以一起设置的,将取两者规则的交集。
postcss-px-to-viewport