按文档 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
产品分类: 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.
按文档 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.
人物略有不同 (作者)
我后面发现,
运行时用的是 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