App中 css v-bind() 不生效

[sangguanghui]

<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
import { useSystemStore } from '@/stores/system'
const systemStore = useSystemStore()
const statusBarHeight = ref('')

onLaunch(() => {
  console.log('App Launch')
  // 初始化配置信息
  setting()
})
onShow(() => {
  console.log('App Show')
})
onHide(() => {
  console.log('App Hide')
})

/**
 * 初始化配置信息
 */
const setting = () => {
  // 获取机型适配信息
  Object.assign(systemStore.$state, uni.getSystemInfoSync())
  statusBarHeight.value = systemStore.statusBarHeight + 'px'
  statusBarHeight.value = '28px'
}
</script>
<style lang="scss">
.app-container {
  --app-status-bar-height: v-bind(statusBarHeight);
}
</style>

v-bind（） h5端生效但 app端不生效

vue3 + ts

[yurj26]

请提供下完整的测试工程

[sand1018]

刚碰到这个问题，app.vue 的scss 使用 v-bind不生效