postcss.config.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. module.exports = {
  2. plugins: {
  3. 'postcss-px-to-viewport': {
  4. unitToConvert: 'px', // 需要转换的单位,默认为"px"
  5. viewportWidth: 1920, // 设计稿的视口宽度
  6. unitPrecision: 5, // 单位转换后保留的精度
  7. propList: ['*'], // 能转化为vw的属性列表
  8. viewportUnit: 'vw', // 希望使用的视口单位
  9. fontViewportUnit: 'vw', // 字体使用的视口单位
  10. selectorBlackList: ['.el-time-spinner__item'], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
  11. minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
  12. mediaQuery: false, // 媒体查询里的单位是否需要转换单位
  13. replace: true, // 是否直接更换属性值,而不添加备用属性
  14. exclude: undefined, // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
  15. include: undefined, // 如果设置了include,那将只有匹配到的文件才会被转换
  16. landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
  17. landscapeUnit: 'vw', // 横屏时使用的单位
  18. landscapeWidth: 1920 // 横屏时使用的视口宽度
  19. },
  20. 'autoprefixer': {
  21. overrideBrowserslist: [
  22. 'Android 4.1',
  23. 'iOS 7.1',
  24. 'Chrome > 31',
  25. 'ff > 31',
  26. 'ie >= 8'
  27. // 'last 10 versions', // 所有主流浏览器最近10版本用
  28. ],
  29. grid: true
  30. },
  31. 'postcss-pxtorem': { //1920
  32. rootValue: 20, // 结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
  33. propList: ['*'],
  34. selectorBlackList: ['.el-time-spinner__item']
  35. }
  36. }
  37. }