Vue下渐变效果有时候失效

记录一个问题:我在项目中给按钮设置一个渐变属性,调试的时候有时候有效果,有时候又没有,代码如下:

.training-right-bmz {
        background: -webkit-linear-gradient(left, #21dfad, #06b7ba);
        background: -moz-linear-gradient(left, #21dfad, #06b7ba);
        background: -ms-linear-gradient(left, #21dfad, #06b7ba);
        background: -o-linear-gradient(left, #21dfad, #06b7ba);
        background: linear-gradient(left, #21dfad, #06b7ba);
        border-radius: 100px 0 0 100px;
        border: none;
        color: #fff;
        font-size: 14px;
        position: absolute;
        padding: 4px 12px;
        right: 0px;
        top: 34px;
}

打开浏览器调试看了下,渐变属性那里变成了感叹号,效果没有渲染出来,想了N多方法还是没有戏,

、、、、

下班回来百度,看到一个大佬的文章,https://www.cnblogs.com/sxgxiaoge/p/9646949.html(Vue项目打包上线后,所使用的css3渐变属性丢失解决方案),突然觉得好像我在写样式代码的时候,有注释的时候,渐变是出来的,没有注释有时候渐变没有了,于是按照大佬的方法:“可能是optimize-css-assets-webpack-plugin这个插件的问题,其实解决办法很简单,只需要在这个属性前后加一个特殊注释即可”,直接加注释,

.training-right-bmz {
        // background: #21dfad;
        background: -webkit-linear-gradient(left, #21dfad, #06b7ba);
        background: -moz-linear-gradient(left, #21dfad, #06b7ba);
        background: -ms-linear-gradient(left, #21dfad, #06b7ba);
        background: -o-linear-gradient(left, #21dfad, #06b7ba);
        background: linear-gradient(left, #21dfad, #06b7ba);
        border-radius: 100px 0 0 100px;
        border: none;
        color: #fff;
        font-size: 14px;
        position: absolute;
        padding: 4px 12px;
        right: 0px;
        top: 34px;
}

发现渐变出来了,有点懵逼,不晓得是不是因为插件的原因还是啥,先记录一下,等明天给测试看看效果还有没有

.

.

 发现问题:随便注释还是不行,直接用大佬的注释代码试试看,如下:

.btn-baomingzhong {
        /*! autoprefixer: off */
        background: -webkit-gradient(
          linear,
          100% 0,
          0 0,
          from(#21dfad),
          to(#06b7ba)
        );
        background: -webkit-linear-gradient(left, #21dfad, #06b7ba);
        /* autoprefixer: on */
        background: -moz-linear-gradient(left, #21dfad, #06b7ba);
        background: -ms-linear-gradient(left, #21dfad, #06b7ba);
        background: -o-linear-gradient(left, #21dfad, #06b7ba);
        background: linear-gradient(left, #21dfad, #06b7ba);
        border-radius: 100px 0 0 100px;
        border: none;
        color: #fff;
        font-size: 14px;
        position: absolute;
        padding: 4px 12px;
        right: 0px;
}

  

 明天看哈

原文地址:https://www.cnblogs.com/secretAngel/p/10187343.html