postcss.config.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. // postcss.config.js
  2. const path = require('path')
  3. module.exports = {
  4. parser: 'postcss-comment',
  5. plugins: {
  6. 'postcss-import': {
  7. resolve(id, basedir, importOptions) {
  8. if (id.startsWith('~@/')) {
  9. return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
  10. } else if (id.startsWith('@/')) {
  11. return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
  12. } else if (id.startsWith('/') && !id.startsWith('//')) {
  13. return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
  14. }
  15. return id
  16. }
  17. },
  18. 'autoprefixer': {
  19. overrideBrowserslist: ["Android >= 4", "ios >= 8"],
  20. remove: process.env.UNI_PLATFORM !== 'h5'
  21. },
  22. // 借助postcss-px-to-viewport插件,实现px转rem,文档:https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
  23. // 以下配置,可以将px转换为rem,如果要调整比例,可以调整 viewportWidth 来实现
  24. 'postcss-px-to-viewport': {
  25. unitToConvert: 'upx', // 需要转换的单位。我这里是rpx,如果你的项目都是用的px,就改成px
  26. viewportWidth: 750,// 密度,一般为750 || 375。这里可以自己修改
  27. unitPrecision: 2,
  28. propList: ['font-size','font-weight'],
  29. //viewportUnit: "px", // 指定需要转换成的视窗单位,默认vw
  30. fontViewportUnit: 'rem', // 字体需要转成的单位,只针对 font-size 属性
  31. selectorBlackList: [],
  32. minPixelValue: 1,
  33. mediaQuery: false,
  34. replace: true,
  35. exclude: undefined,
  36. include: undefined,
  37. landscape: false
  38. },
  39. '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
  40. }
  41. }