摘要:本篇教程介绍了HTML+CSS入门 webpack对CSS压缩中对前缀的处理,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 webpack对CSS压缩中对前缀的处理,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。<
在 vue-cli 创建的项目中,用默认的 webpack 配置对项目打包后,发现 css 文件中样式的前缀有所缺失,例如:flex 这个应该有前缀的属性却没有(display:-webkit-flex; && -webkit-flex:1),导致样式在 iphone 6s plus 上出现了兼容问题。
postcss 对 css 的前缀是有处理功能的,在项目的默认配置中,会根据各个浏览器最新两个版本的支持情况去添加前缀的,而现在浏览器都应该能很好地支持 flex 了,于是,便不现加前缀。对此,我们可以做如下处理:
//vue-loader.config.js
......
module.exports = {
......
postcss: [
require(‘autoprefixer‘)({ browsers: [‘last 10 Chrome versions‘, ‘last 5 Firefox versions‘, ‘Safari >= 6‘, ‘ie > 8‘] })
]
}
经过以上处理,打包后的 css 应该就拥有合适的前缀了,但并不如此,原因是在打包过程中,css 有个压缩动作,在这个动作中,压缩插件(用的是 optimize-css-assets-webpack-plugin 这个插件)会再一次对 css 的前缀做处理,会将它认为不需要的代码(如不需要的 css 前缀)去掉。因为前面已经用 postcss 对 css 的前缀做过处理,所以在这里对 css 前缀的处理是多余的,我们可以做如下处理:
// webpack.prod.config.js
......
const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin‘)
......
new OptimizeCSSPlugin({
cssProcessor: require(‘cssnano‘),
cssProcessorOptions: {
discardComments: { removeAll: true },
// 避免 cssnano 重新计算 z-index
safe: true,
//cssnano通过移除注释、空白、重复规则、过时的浏览器前缀以及做出其他的优化来工作,一般能减少至少 50% 的大小
//cssnano 集成了autoprefixer的功能。会使用到autoprefixer进行无关前缀的清理。默认不兼容ios8,会去掉部分webkit前缀,比如flex
//所以这里选择关闭,使用postcss的autoprefixer功能
autoprefixer: false
},
canPrint: true
//cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true }
}),
......
再次打包后,你会发现你想要的前缀出现了。
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号