今天做练手项目部署的时候碰到了个奇怪问题,开发环境里显示得好好的CSS prefixer样式,到production环境就消失了。
我开发环境用的是 scss ,刚开始我还以为是 scss 处理器的问题,后来研究了下 build 脚本,发现人家把CSS统一用一个插件给压缩了,然后追查之下发现这个插件用了postCSS的autoprefixer插件。
这下问题就清楚了,因为 autoprefixer 插件会针对支持的浏览器进行CSS 前缀的删除和追加。
比如:
a {-webkit-border-radius: 5px;border-radius: 5px;}
编译成:
a {border-radius: 5px;}
autoprefixer 使用了browserslist作为依赖。在项目目录中运行:
npx browserslist
可以查看当前项目支持的浏览器列表,这时候只要修改当前项目支持的浏览器就可以了。
vue-cli生成的项目默认支持部分移动端浏览器和最新版本的PC端浏览器。
在package.json中修改browserslist
:
"browserslist": ["> 1%","last 2 versions","last 10 Chrome versions","last 5 Firefox versions","Safari >= 6","ie > 8"]
之后再运行npm run build
这时生成的代码就有 css prefix 了。
博客原文://v...