vue-cli项目中使用css做了一个渐变色的横条,在本地显示正常,但打包后发现css文件中渐变属性只剩下一行,其他全部丢失。
background:-webkit-gradient(linear, left top,right top, from(#000000), to(#ffffff));
background:-webkit-linear-gradient(left, #000000, #ffffff);
background:-moz-linear-gradient(left, #000000, #ffffff);
background:-o-linear-gradient(left, #000000, #ffffff);
background:-ms-linear-gradient(left, #000000, #ffffff);
background:linear-gradient(left, #000000, #ffffff); //打包后发现只剩这一行了,当然在浏览器中无法正常显示
百度后发现解决方案,前后加注释,使打包时能够加上,修改如下
/*! autoprefixer: off */
background:-webkit-gradient(linear, left top,right top, from(#000000), to(#ffffff));
background:-webkit-linear-gradient(left, #000000, #ffffff);
background:-moz-linear-gradient(left, #000000, #ffffff);
background:-o-linear-gradient(left, #000000, #ffffff);
background:-ms-linear-gradient(left, #000000, #ffffff);
/* autoprefixer: on */
background:linear-gradient(left, #000000, #ffffff);
按理说应该好用,大家都解决了,但发现还是不好用,就很郁闷,后来发现样式用了css预处理器stylus,即lang='stylus'.
重新放到style里面打包后能正常显示了。
所以综上除了加注释外,还要留意是否用了预处理器(可能打包时样式做了整合,就丢失了),这样才能保证渐变样式(其他应该也一样)不丢失。