uni-app 样式表丢失问题：按钮默认白色，期望通过样式表改成黄色但未成功

uni-app 样式表丢失问题：按钮默认白色，期望通过样式表改成黄色但未成功

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/小程序/微信

操作步骤：

background-image: -moz-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);  
background-image: -webkit-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);  
background-image: -ms-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);

预期结果：

background-image: -moz-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);  
background-image: -webkit-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);  
background-image: -ms-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);

实际结果：

background-image: -ms-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);

bug描述：

VUE中CSS代码如下

background-image: -moz-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);  
background-image: -webkit-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);  
background-image: -ms-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);

经过3.2.9编译后代码为：

background-image: -ms-linear-gradient(180deg, #ff6701 0%, #ff8a25 100%);

导致编译后在小程序开发者工具里，和真机微信里，这个代码是不能正常使用的。

另在上一个版本3.2.3中： 编译后的代码为：

background-image: -webkit-linear-gradient(180deg, #ff6701 0%, #ff8a25 100%);  
background-image: -ms-linear-gradient(180deg, #ff6701 0%, #ff8a25 100%);

这段代码显示正常。

当然，最上面那段程序写法有点瑕疵： 可以写为：

background-image: -moz-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);  
background-image: -webkit-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);  
background-image: -ms-linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);  
background-image: linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);

或者

background-image: linear-gradient(180deg, rgb(255, 103, 1) 0%, rgb(255, 138, 37) 100%);

更多关于uni-app 样式表丢失问题：按钮默认白色，期望通过样式表改成黄色但未成功的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

您好，加一下我QQ345278643，帮我解决一个问题，有偿

更多关于uni-app 样式表丢失问题：按钮默认白色，期望通过样式表改成黄色但未成功的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于 uni-app 3.2.9 版本在编译 CSS 时对 background-image 属性的处理存在缺陷导致的。在编译过程中，-moz-linear-gradient 和 -webkit-linear-gradient 前缀被错误地移除，仅保留了 -ms-linear-gradient，同时颜色值从 rgb() 格式被转换成了十六进制格式。

在小程序环境中，-ms-linear-gradient 前缀通常不被支持，这会导致渐变效果失效，按钮显示为默认的白色。

解决方案：

  1. 临时回退版本：可以暂时将 HBuilderX 中的 uni-app 编译器版本回退到 3.2.3，这是最直接的解决方法。

  2. 修改 CSS 写法：采用标准写法，并利用 uni-app 的编译能力。 将你的 CSS 代码简化为：

    background-image: linear-gradient(180deg, #ff6701 0%, #ff8a25 100%);

    uni-app 编译器在将代码编译到各平台时，会根据目标平台自动添加必要的前缀（如 -webkit-）。直接使用标准 linear-gradient 语法，让编译器去处理兼容性，是更推荐的做法。

  3. 使用条件编译：如果不同平台需要不同的样式，可以使用条件编译。

    /* #ifdef MP-WEIXIN */
background-image: linear-gradient(180deg, #ff6701 0%, #ff8a25 100%);
/* #endif */
/* #ifdef H5 */
background-image: -webkit-linear-gradient(180deg, #ff6701 0%, #ff8a25 100%);
background-image: linear-gradient(180deg, #ff6701 0%, #ff8a25 100%);
/* #endif */
回到顶部