Vue下漸變效果有時候失效 vue 打包上線後 所使用的css3漸變屬性丟失的問題解決方案
阿新 • • 發佈:2018-12-27
記錄一個問題:我在專案中給按鈕設定一個漸變屬性,除錯的時候有時候有效果,有時候又沒有,程式碼如下:
.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; }
發現漸變出來了,有點懵逼,不曉得是不是因為外掛的原因還是啥,先記錄一下,等明天給測試看看效果還有沒有