uni-app新版HBuilderX 微信小程序css 样式不生效

uni-app新版HBuilderX 微信小程序css 样式不生效

示例代码：

.but {
border-radius: 44px;
background-image: -moz-linear-gradient( 180deg, rgb(0,136,254) 0%, rgb(111,188,255) 100%);
background-image: -webkit-linear-gradient( 180deg, rgb(0,136,254) 0%, rgb(111,188,255) 100%);
background-image: -ms-linear-gradient( 180deg, rgb(0,136,254) 0%, rgb(111,188,255) 100%);
width: 280rpx;
height: 80rpx;
font-size: 28rpx;
}

操作步骤：

  • 按钮class 给 设置but 样式

预期结果：

  • css样式正常

实际结果：

  • 新版本不 样式不生效

bug描述：

升级到最新版HBuilderX， css 样式不生效; 回退上一个版本正常 css 样式正常



| 项目信息         | 信息                           |
|------------------|--------------------------------|
| 产品分类         | uniapp/小程序/微信             |
| PC开发环境操作系统 | Windows                       |
| PC开发环境操作系统版本号 | win10                         |
| HBuilderX类型     | 正式                          |
| HBuilderX版本号   | 3.2.9                         |
| 第三方开发者工具版本号 | 1.0521                        |
| 基础库版本号      | 最新                          |
| 项目创建方式      | HBuilderX                     |

更多关于uni-app新版HBuilderX 微信小程序css 样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

background-image: -moz-linear-gradient( 180deg, rgb(0,136,254) 0%, rgb(111,188,255) 100%); background-image: -webkit-linear-gradient( 180deg, rgb(0,136,254) 0%, rgb(111,188,255) 100%); background-image: -ms-linear-gradient( 180deg, rgb(0,136,254) 0%, rgb(111,188,255) 100%);

改为呢？ background-image: linear-gradient( 180deg, rgb(0,136,254) 0%, rgb(111,188,255) 100%);

更多关于uni-app新版HBuilderX 微信小程序css 样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


改了 也不生效

新版HBuilderX 3.2.9中，微信小程序的CSS样式不生效，通常是由于样式编译或兼容性问题导致的。根据你的描述，回退到上一个版本正常，可以确认是新版本引入的问题。

针对你提供的代码，主要问题在于background-image的渐变写法。微信小程序平台对CSS渐变语法的支持有限，且不同版本可能存在差异。新版本HBuilderX可能调整了样式编译策略，导致部分CSS属性不被正确转换或识别。

解决方案：

  1. 使用标准的线性渐变语法： 将-moz-linear-gradient、-webkit-linear-gradient等前缀写法替换为标准的linear-gradient。微信小程序通常支持标准语法。

    .but {
  border-radius: 44px;
  background-image: linear-gradient(180deg, rgb(0,136,254) 0%, rgb(111,188,255) 100%);
  width: 280rpx;
  height: 80rpx;
  font-size: 28rpx;
}
回到顶部