vue-cli 项目中css使用渐变色属性，打包后样式丢失不生效

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里面打包后能正常显示了。

所以综上除了加注释外，还要留意是否用了预处理器（可能打包时样式做了整合，就丢失了），这样才能保证渐变样式（其他应该也一样）不丢失。