uni-app 在style中进行条件编译导致样式丢失

uni-app 在style中进行条件编译导致样式丢失

信息类型 详细信息
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 win10
浏览器 Chrome
浏览器版本 119.0.6045.160
项目创建方式 CLI
CLI版本号 3.0.0-3090820231124001

示例代码：

<template>  
  <div class="page">  
    <div class="header">我是测试文本</div>  
  </div>  
</template>  
<script setup></script>  

<style lang="scss">
/*  #ifdef  APP-PLUS */  
page {  
  background-color: #f5f7fa;  
}  
/*  #endif  */  
</style>  
<style lang="scss" scoped>  
page {  
  background-color: #f5f7fa;  
}  
.header {  
  color: red;  
  padding: 12px;  
}  
</style>

操作步骤：

  • 修改header的color值
    .header {  
  color: red;  
}
  • 做任意修改
    .header {  
  color: blue;  
}
  • 请看附件第二张图，样式没了

预期结果：

  • 样式生效

实际结果：

  • 修改style后样式丢失，需要保存反复编译才可以生效

bug描述：

在style中进行条件编译导致样式丢失，需要多次保存，去掉后正常


更多关于uni-app 在style中进行条件编译导致样式丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

感谢反馈，这边排查下。

更多关于uni-app 在style中进行条件编译导致样式丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Uni-app 中，使用条件编译（如 #ifdef 和 #endif）来根据平台或环境动态加载样式是一种常见的做法。然而，如果在 style 标签中使用条件编译不当，可能会导致样式丢失或无法正确应用。以下是一些常见的原因和解决方法：

原因 1：条件编译语法错误

如果条件编译的语法不正确，可能会导致整个 style 标签被忽略，从而丢失样式。

示例：

<template>
  <view class="box">Hello Uni-app</view>
</template>

<style>
/* 错误示例：缺少 #endif */
#ifdef H5
.box {
  color: red;
}
#endif
</style>

解决方法： 确保条件编译的语法正确，包括 #ifdef、#endif 等。

<style>
/* 正确示例 */
#ifdef H5
.box {
  color: red;
}
#endif
</style>

原因 2：平台标识符错误

如果使用的平台标识符（如 H5、MP-WEIXIN）不正确，条件编译不会生效。

示例：

<style>
/* 错误示例：标识符拼写错误 */
#ifdef MP_WEXIN
.box {
  color: blue;
}
#endif
</style>

解决方法： 确保使用的平台标识符正确。以下是常用的标识符：

  • H5：H5 平台
  • MP-WEIXIN：微信小程序
  • APP-PLUS：App 平台
  • MP-ALIPAY：支付宝小程序
<style>
/* 正确示例 */
#ifdef MP-WEIXIN
.box {
  color: blue;
}
#endif
</style>

原因 3：样式优先级问题

如果条件编译的样式被其他样式覆盖，可能会导致样式失效。

示例：

<style>
.box {
  color: black; /* 默认样式 */
}

#ifdef H5
.box {
  color: red; /* 条件编译样式 */
}
#endif
</style>

如果默认样式的优先级高于条件编译样式，条件编译样式可能不会生效。

解决方法： 提高条件编译样式的优先级，例如使用更具体的选择器或 !important。

<style>
.box {
  color: black;
}

#ifdef H5
.box {
  color: red !important; /* 提高优先级 */
}
#endif
</style>

原因 4：条件编译范围错误

如果条件编译的范围不正确，可能会导致部分样式丢失。

示例：

<style>
/* 错误示例：条件编译范围不完整 */
#ifdef H5
.box {
  color: red;
}
.other-class {
  font-size: 14px;
}
#endif
</style>

如果 .other-class 的样式也需要在 H5 平台生效，但被错误地放在条件编译之外，可能会导致样式丢失。

解决方法： 确保条件编译的范围正确。

<style>
/* 正确示例 */
#ifdef H5
.box {
  color: red;
}
.other-class {
  font-size: 14px;
}
#endif
</style>

原因 5：样式未正确编译

在某些情况下，Uni-app 的编译器可能无法正确处理条件编译，导致样式丢失。

解决方法：

  1. 确保 Uni-app 的版本是最新的。
  2. 检查编译器的配置是否正确。
  3. 如果问题仍然存在，可以尝试将条件编译的样式单独写在一个文件中，然后通过 @import 引入。
<style>
@import "./h5.css"; /* 单独的条件编译样式文件 */
</style>

在 h5.css 中：

#ifdef H5
.box {
  color: red;
}
#endif
回到顶部