在写完mint-ui的vue项目,打包后,去检查css文件的时候会发现,css样式里面的所有-webkit-animation都没有了,所以在一些不兼容animation属性的浏览器上动画就会不起效果。这个是由于optimize-css-assets-webpack-plugin
这个插件的问题。
解决方案:
1.找到webpack.prod.conf.js,注释掉以下代码:
// new OptimizeCSSPlugin({
// cssProcessorOptions: config.build.productionSourceMap
// ? { safe: true, map: { inline: false } }
// : { safe: true }
// }),
2.由于这段代码是实现css压缩的,注释掉css文件就不会压缩,所以需要处理一下,还要让css文件压缩
在utils.js中添加minimize:true
const
cssLoader = {
loader:
'css-loader',
options: {
sourceMap:
options.
sourceMap,
minimize:true
}
}
处理完这些,重新打包项目上线,在华为自带浏览器上就能看到spinner组件的动画效果。
目前我的处理方法是这样的,而且有效,如果你按照这个方法处理无效,可以留言或者加QQ一起探讨。
QQ:1150239832