uni-app 使用vue3导致h5标签的css样式解析有问题

在使用 uni-app 开发时，如果你选择使用 Vue 3，可能会遇到一些 H5 标签的 CSS 样式解析问题。这通常是由于 Vue 3 的某些特性或 uni-app 的编译机制导致的。以下是一些常见的问题及其解决方案：

1. 样式作用域问题

• 问题描述: 在 Vue 3 中，scoped 样式可能会导致某些 H5 标签的样式无法正确应用。

• 解决方案: 尝试移除 scoped 属性，或者使用 ::v-deep 或 :deep() 来穿透作用域样式。

  /* 使用 ::v-deep */
  ::v-deep h1 {
    color: red;
  }
  
  /* 或者使用 :deep() */
  :deep(h1) {
    color: red;
  }
  

2. 样式优先级问题

• 问题描述: Vue 3 的样式优先级可能与 uni-app 的默认样式冲突，导致某些样式无法生效。

• 解决方案: 使用 !important 提高样式优先级，或者检查是否有其他样式覆盖了你的样式。

  h1 {
    color: red !important;
  }
  

3. 样式未正确编译

• 问题描述: uni-app 在编译 Vue 3 项目时，可能会忽略某些 CSS 样式。

• 解决方案: 确保你的 CSS 样式符合 uni-app 的编译规则，或者尝试使用 style 标签内联样式。

  <template>
    <h1 style="color: red;">Hello World</h1>
  </template>
  

4. 全局样式污染

• 问题描述: 在 Vue 3 中，全局样式可能会影响到其他组件，导致样式解析错误。

• 解决方案: 使用 scoped 样式或 CSS Modules 来隔离样式。

  /* 使用 scoped 样式 */
  <style scoped>
  h1 {
    color: red;
  }
  </style>
  
  /* 使用 CSS Modules */
  <style module>
  .title {
    color: red;
  }
  </style>
  

5. 浏览器兼容性问题

• 问题描述: 某些 CSS 属性在 H5 环境下可能不被所有浏览器支持。

• 解决方案: 使用 autoprefixer 自动添加浏览器前缀，或者手动添加兼容性代码。

  h1 {
    -webkit-text-fill-color: red;
    text-fill-color: red;
  }
  

6. 检查 uni-app 版本

• 问题描述: 某些 uni-app 版本可能存在 Vue 3 的兼容性问题。

• 解决方案: 确保你使用的是最新版本的 uni-app，并检查是否有相关的 bug 修复。

  npm update @dcloudio/uni-app
  

7. 使用 uni-app 提供的样式解决方案

• 问题描述: uni-app 提供了一些内置的样式解决方案，可能更适合 H5 环境。

• 解决方案: 使用 uni-app 提供的样式类或组件，而不是直接使用 H5 标签。

  <template>
    <view class="uni-title">Hello World</view>
  </template>