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