vue自动添加浏览器兼容前后缀操作
2020-08-15 04:08
1926 查看
1.安装loader
安装postcss-loader 和 autoprefixer
下载:
cnpm install postcss-loader autoprefixer --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', 'last 4 version' ] }) ] } }]
设置
在网站上会发现
以下解释
补充知识:vue-cli 解决通过js import css无法自动加上浏览器前缀
1.找到build/utils.js
2.在exports.cssLoaders内添加如下代码
const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } }
function generateLoaders (loader, loaderOptions) { const loaders = [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": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {} } }
4.找到package.json文件添加如下代码 (注意:与devDependencies字段同级)
"browserslist": [ "last 10 Chrome versions", "last 5 Firefox versions", "Safari >= 6", "ie > 8" ]
5.安装如下依赖
npm install postcss-import --save-dev npm install postcss-loader --save-dev npm install postcss-url --save-dev npm install autoprefixer --save-dev
6.这时可以启动你的工程了 试试吧
以上这篇vue自动添加浏览器兼容前后缀操作就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- 四二、js操作DOM(dom)改变css3属性时封装方法使自动识别浏览器添加css3属性前缀
- 关于Dom部分操作各浏览器兼容(setAttribute 与添加事件)
- css自动添加浏览器兼容前缀 autoprefixer设置
- JS对select动态添加options操作(主流浏览器兼容)
- vue页面在微信浏览器下拉出现网址的解决,并兼容小米8内置浏览器等浏览器页面到底不能滑动问题(因为app也用到了这个页面)
- JS对select动态添加options操作[IE&FireFox兼容]
- vue实现动态添加数据滚动条自动滚动到底部
- vue run dev后自动打开浏览器插件:open-browser-webpack-plugin
- innerHTML动态添加html代码和脚本兼容多个浏览器
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- 多文件上传与简单操作文件上传实例(文件上传,自动重命名,自动添加文件夹)
- tp5 view视图调用控制器方法自动添加.html后缀问题
- Vue-elementUI 表格里动态添加行操作按钮,并且是el-dropdown 下拉框,给el-dropdown绑定点击事件
- 图片跟随用户对浏览器的操作自动调整大小
- 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
- JS对select动态添加options操作[IE&FireFox兼容]
- 让webpack+vue-cil项目不再自动打开浏览器
- Vue添加自动刷新功能
- 兼容各浏览器的CSS实现超出部分自动换行
- 记录浏览器添加收藏,cookie操作