uni-app HBuilder 项目，导入unocss 云打包报错[postcss] Cannot read properties of undefined (reading 'get')
uni-app HBuilder 项目，导入unocss 云打包报错[postcss] Cannot read properties of undefined (reading ‘get’)
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | wind10 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：3.98
手机系统：Android
手机系统版本号：Android 12
手机厂商：一加
手机机型：8T
页面类型：vue
vue版本：vue3
打包方式：云端
示例代码：
//1 hbuilder 创建项目
//2 pnpm init && pnpm i -D unocss
//3 创建 vite.config.js
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import UnoCSS from 'unocss/vite'
export default defineConfig({
plugins: [
uni(),
UnoCSS()
],
})
//4 创建uno.config.js
import {
defineConfig,
// app预设
presetWind,
presetAttributify
} from "unocss";
export default defineConfig({
presets: [
presetWind(),
presetAttributify(),
],
});
//5 main.js添加uno.css 可以vue文件添加class测试是否生效class="bg-red" m="l-100rpx"
import 'virtual:uno.css'
//6 云打包 云证书 安卓 操作步骤：
//1 hbuilder 创建项目
//2 pnpm init && pnpm i -D unocss
//3 创建 vite.config.js
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import UnoCSS from 'unocss/vite'
export default defineConfig({
plugins: [
uni(),
UnoCSS()
],
})
//4 创建uno.config.js
import {
defineConfig,
// app预设
presetWind,
presetAttributify
} from "unocss";
export default defineConfig({
presets: [
presetWind(),
presetAttributify(),
],
});
//5 main.js添加uno.css 可以vue文件添加class测试是否生效class="bg-red" m="l-100rpx"
import 'virtual:uno.css'
//6 云打包 云证书 安卓 预期结果：
正常打包
实际结果：
[plugin:unocss:global:build:scan] [postcss] Cannot read properties of undefined (reading 'get')
[HBuilder] 23:22:45.804 Build failed with errors.bug描述：
Hbuilder 项目，导入unocss 云打包报错[postcss] Cannot read properties of undefined (reading ‘get’)
cli项目一旦涉及云函数，市场插件就会变得混乱，不如Hbuilder 项目，理论上这样是没问题的，但是报错了，猜测依赖问题冲突，不知道哪一个很可能是eslint14到15 postcss也包过这个错
在使用 uni-app 进行开发时，如果你在 HBuilder 项目中导入了 unocss 并进行云打包时遇到 [postcss] Cannot read properties of undefined (reading 'get') 的错误，通常是因为 unocss 和 postcss 之间的兼容性问题，或者配置不正确导致的。
以下是一些可能的解决方案：
1. 检查 unocss 和 postcss 的版本
确保你使用的 unocss 和 postcss 版本是兼容的。你可以尝试更新或降级这两个包的版本，看看是否能解决问题。
npm install unocss@latest postcss@latest或者：
npm install unocss@<specific_version> postcss@<specific_version>2. 检查 postcss.config.js 配置文件
确保你的 postcss.config.js 配置文件正确配置了 unocss 插件。
// postcss.config.js
module.exports = {
plugins: {
'unocss': {},
// 其他插件
}
}3. 检查 unocss 配置
确保你的 unocss 配置文件（通常是 uno.config.ts 或 unocss.config.ts）正确配置。
// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
// 配置项
})4. 检查 HBuilder 的构建配置
在 HBuilder 中，检查项目的构建配置，确保没有冲突的配置项。你可以尝试在 manifest.json 或 vue.config.js 中调整配置。
5. 清理缓存并重新安装依赖
有时候，清理缓存并重新安装依赖可以解决一些莫名其妙的问题。
rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm install6. 使用 unocss-webpack-plugin
如果你在 uni-app 中使用 webpack 进行构建，可以尝试使用 unocss-webpack-plugin 插件。
npm install unocss-webpack-plugin --save-dev然后在 vue.config.js 中配置：
// vue.config.js
const UnoCSS = require('unocss-webpack-plugin').default
module.exports = {
configureWebpack: {
plugins: [
new UnoCSS(),
],
},
}7. 检查 postcss 插件加载顺序
有时候，postcss 插件的加载顺序也会导致问题。确保 unocss 插件在其他 postcss 插件之前加载。
8. 查看错误日志
查看详细的错误日志，定位具体的错误位置。有时候错误日志会给出更具体的提示，帮助你找到问题的根源。
9. 确保 unocss 在项目中正确引入
确保你在项目的主入口文件（如 main.js 或 main.ts）中正确引入了 unocss。
// main.js
import 'uno.css'