人物略有不同
人物略有不同
  • 发布:2024-07-30 17:49
  • 更新:2024-07-31 21:11
  • 阅读:823

【报Bug】postcss.config.js 文件报错

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版

HBuilderX类型: 正式

HBuilderX版本号: 4.24

第三方开发者工具版本号: 微信开发者工具 Stable 1.06.2405020

基础库版本号: 3.4.6

项目创建方式: HBuilderX

操作步骤:

按文档 https://uniapp.dcloud.net.cn/tutorial/adapt.html#_3-%E5%86%85%E5%AE%B9%E7%BC%A9%E6%94%BE%E6%8B%89%E4%BC%B8%E7%9A%84%E5%A4%84%E7%90%86

创建 postcss.config.js

预期结果:

能编译

实际结果:

报错
Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.
17:42:44.466 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.
17:42:46.623 Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
17:42:46.645 ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
17:42:46.672 TypeError: postcss.atRule is not a constructor
17:42:46.693 at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss-px-to-viewport\index.js:100:27
17:42:46.717 at LazyResult.run (D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:288:14)
17:42:46.739 at LazyResult.asyncTick (D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:212:26)
17:42:46.762 at LazyResult.asyncTick (D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:225:14)
17:42:46.787 at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:217:17
17:42:46.809 at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\webpack\lib\NormalModule.js:316:20
17:42:46.829 at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\loader-runner\lib\LoaderRunner.js:367:11
17:42:46.856 at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\loader-runner\lib\LoaderRunner.js:233:18
17:42:46.880 at context.callback (D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
17:42:46.906 at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss-loader\src\index.js:208:9
17:42:46.916 ERROR Build failed with errors.

bug描述:

按文档 https://uniapp.dcloud.net.cn/tutorial/adapt.html#_3-%E5%86%85%E5%AE%B9%E7%BC%A9%E6%94%BE%E6%8B%89%E4%BC%B8%E7%9A%84%E5%A4%84%E7%90%86

// 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: 'rpx',// 需要转换的单位,默认为"px"  
      viewportWidth: 750,// 设计稿的视口宽度  
      unitPrecision: 5,// 单位转换后保留的精度  
      propList: ['*'],// 能转化为vw的属性列表  
      viewportUnit: 'px',// 希望使用的视口单位  
      fontViewportUnit: 'px',// 字体使用的视口单位  
      selectorBlackList: [],// 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。  
      minPixelValue: 1,// 设置最小的转换数值,如果为1的话,只有大于1的值会被转换  
      mediaQuery: false,// 媒体查询里的单位是否需要转换单位  
      replace: true,//  是否直接更换属性值,而不添加备用属性  
      exclude: [/node_modules/, /dist/, /.output/, /.nuxt/, /.vscode/],// 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件  
      include: undefined,// 如果设置了include,那将只有匹配到的文件才会被转换  
      landscape: true,// 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)  
      landscapeUnit:'px',// 横屏时使用的单位  
      landscapeWidth:750// 横屏时使用的视口宽度  
    },  
    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}  
  }  
}  

运行时报错

17:42:28.076 正在编译中...  
17:42:36.615 ​postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:  
17:42:36.625 https://evilmartians.com/chronicles/postcss-8-plugin-migration​  
17:42:36.636 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:36.647 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:43.953 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:43.965 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:43.977 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:43.990 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.004 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.017 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.029 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.043 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.057 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.072 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.089 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.104 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.119 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.132 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.148 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.162 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.184 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.199 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.214 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.229 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.244 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.266 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.281 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.300 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.316 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.332 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.349 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.366 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.382 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.401 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.417 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.435 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.450 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:44.466 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.39, but postcss-px-to-viewport uses 8.4.19. Perhaps this is the source of the error below.  
17:42:46.623 Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):  
17:42:46.645 ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):  
17:42:46.672 TypeError: postcss.atRule is not a constructor  
17:42:46.693     at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss-px-to-viewport\index.js:100:27  
17:42:46.717     at LazyResult.run (D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:288:14)  
17:42:46.739     at LazyResult.asyncTick (D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:212:26)  
17:42:46.762     at LazyResult.asyncTick (D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:225:14)  
17:42:46.787     at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:217:17  
17:42:46.809     at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\webpack\lib\NormalModule.js:316:20  
17:42:46.829     at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\loader-runner\lib\LoaderRunner.js:367:11  
17:42:46.856     at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\loader-runner\lib\LoaderRunner.js:233:18  
17:42:46.880     at context.callback (D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\loader-runner\lib\LoaderRunner.js:111:13)  
17:42:46.906     at D:\Program Files\HBuilderX1\plugins\uniapp-cli\node_modules\postcss-loader\src\index.js:208:9  
17:42:46.916  ERROR  Build failed with errors.  
2024-07-30 17:49 负责人:无 分享
已邀请:
人物略有不同

人物略有不同 (作者)

我后面发现,
运行时用的是 HBuilderX\plugins\uniapp-cli\node_modules\postcss

HBuilderX\plugins\uniapp-cli\node_modules\postcss-px-to-viewport
所需要的版本不一致

最后将以下删除就行
HBuilderX\plugins\uniapp-cli\node_modules\postcss-px-to-viewport\node_modules\postcss

BFC

BFC

你好, 可以尝试用npx @dcloudio/uvm@latest 更新uniapp 版本,或者安装postcss 8.4.19版本

要回复问题请先登录注册