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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。