vue自动添加浏览器兼容前后缀操作
1.安装loader
安装postcss-loader和autoprefixer
下载：
cnpminstallpostcss-loaderautoprefixer--save-dev
在webpack.config.js里面设置以下代码
test:/\.css$/,
use:['style-loader','css-loader',{
loader:"postcss-loader",
options:{
plugins:[
require("autoprefixer")({
browsers:[
'ie>=8',
'Firefox>=20',
'Safari>=5',
'Android>=4',
'Ios>=6',
'last4version'
]
})
]
}
}]
设置
在网站上会发现
以下解释
补充知识：vue-cli解决通过jsimportcss无法自动加上浏览器前缀
1.找到build/utils.js
2.在exports.cssLoaders内添加如下代码
constpostcssLoader={
loader:'postcss-loader',
options:{
sourceMap:options.sourceMap
}
}
functiongenerateLoaders(loader,loaderOptions){
constloaders=[cssLoader]
if(loader){
loaders.push({
loader:loader+'-loader',
options:Object.assign({},loaderOptions,{
sourceMap:options.sourceMap
})
})
}
loaders.push(postcssLoader)
......
}
3.在项目目录下也就是与node_modules同级目录下新建.postcssrc.js(注意前面有个点)添加如下代码
//https://github.com/michael-ciniawsky/postcss-load-config
module.exports={
"plugins":{
"postcss-import":{},
"postcss-url":{},
//toedittargetbrowsers:use"browserslist"fieldinpackage.json
"autoprefixer":{}
}
}
4.找到package.json文件添加如下代码（注意：与devDependencies字段同级）
"browserslist":[ "last10Chromeversions", "last5Firefoxversions", "Safari>=6", "ie>8" ]
5.安装如下依赖
npminstallpostcss-import--save-dev npminstallpostcss-loader--save-dev npminstallpostcss-url--save-dev npminstallautoprefixer--save-dev
6.这时可以启动你的工程了试试吧
以上这篇vue自动添加浏览器兼容前后缀操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。