uni-app中postcss-px-to-viewport转换失败

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app中postcss-px-to-viewport转换失败

我的postcss配置如下，但是没能将项目中的px转换成rpx

// postcss.config.js  

const path = require('path')  
module.exports = {  
  parser: 'postcss-comment',  
  plugins: {  
    'postcss-import': {  
      resolve(id, basedir, importOptions) {  
        if (id.startsWith('~@/')) {  
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))  
        } else if (id.startsWith('@/')) {  
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))  
        } else if (id.startsWith('/') && !id.startsWith('//')) {  
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))  
        }  
        return id  
      }  
    },  
    'autoprefixer': {  
      overrideBrowserslist: ["Android >= 4", "ios >= 8"],  
      remove: process.env.UNI_PLATFORM !== 'h5'  
    },  
    // 借助postcss-px-to-viewport插件，实现rpx转px，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md  
    // 以下配置，可以将rpx转换为1/2的px，如20rpx=10px，如果要调整比例，可以调整 viewportWidth 来实现  
    'postcss-px-to-viewport': {  
      unitToConvert: 'px',  
      viewportWidth: 375,  
      unitPrecision: 5,  
      propList: ['*'],  
      viewportUnit: 'rpx',  
      fontViewportUnit: 'rpx',  
      selectorBlackList: [],  
      minPixelValue: 1,  
      mediaQuery: false,  
      replace: true,  
      exclude: undefined,  
      include: undefined,  
      landscape: false,  
      landscapeUnit: 'rpx',  
      landscapeWidth: 568  
    },  
    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}  
  }  
}

Harmonyos Next教程
1 回复

在uni-app中，如果遇到postcss-px-to-viewport转换失败的问题，这通常是由于配置不正确或相关依赖未正确安装导致的。下面我将提供一个基本的配置示例和一些排查步骤，帮助你解决这个问题。

基本配置示例

首先，确保你的项目根目录下有一个postcss.config.js文件，并且内容正确配置了postcss-px-to-viewport。以下是一个基本的配置示例：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要转换的单位
      viewportWidth: 750, // 设计稿的宽度
      unitPrecision: 5, // 转换后的精度
      propList: ['*'], // 指定需要转换的属性，*代表全部属性
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 需要忽略的选择器，不会进行px转换
      minPixelValue: 1, // 小于或等于1px不转换
      mediaQuery: false, // 允许在媒体查询中转换px
      replace: true, // 是否直接替换
      exclude: /node_modules/ // 设置忽略文件，用正则做匹配
    }
  }
};

排查步骤

  1. 检查依赖安装： 确保你已经安装了postcss-px-to-viewport。在项目根目录下运行：

    npm install postcss-px-to-viewport --save-dev

  2. 检查配置文件： 确认postcss.config.js文件是否存在，并且内容正确无误。特别是viewportWidth和unitPrecision等配置项是否按照你的项目需求设置。

  3. 检查项目结构： 确保postcss.config.js文件位于项目的根目录，这样PostCSS才能在构建时正确加载它。

  4. 重启开发服务器： 修改配置后，重启你的uni-app开发服务器，以确保新的配置生效。

  5. 查看控制台输出： 在构建或运行时，注意控制台是否有任何与PostCSS或postcss-px-to-viewport相关的错误信息，这些信息可能会提供解决问题的线索。

通过上述步骤，你应该能够定位并解决postcss-px-to-viewport转换失败的问题。如果问题依旧存在，建议检查uni-app和PostCSS的官方文档，或者搜索具体的错误信息，看是否有其他开发者遇到并解决了类似的问题。

回到顶部