解决CSS浏览器兼容性问题的4种方案_Haikin Tei的博客-CSDN博客
Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀 。它是 Google 推荐的，并在Twitter和阿里巴巴中使用。
可以实现css3代码自动补全，也可以运用到sass、less中
前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。
当然，我们可以手动添加，这样会使开发变得枯燥无味，且容易出错、遗漏，可能会增加不必要的调试。这样既浪费时间，又在无形中给自己添加了很多没必要的工作量。
Autoprefixer 就能很方便的解决上述问题，简化我们的开发模式。
一、我们先来瞧一瞧Autoprefixer 的效果
Autoprefixer处理前css代码
display: flex;
Autoprefixer处理后css代码
display: -webkit-box;
display: -ms-flexbox;
display: flex;
二、autoprefixer安装步骤(vue-cli3)
1. 前置依赖安装
npm install -D css-loader style-loader2. 安装postcss依赖相关依赖
npm install -D postcss-loader autoprefixer postcss3. 在webpack.config.js中进行配置
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}
4. 配置autoprefixer
方式一：在postcss.config.js进行配置
module.exports = {
plugins: {
// 兼容浏览器，添加前缀
'autoprefixer':{
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
//'last 10 versions', // 所有主流浏览器最近2个版本
],
grid: true
}
}
}
方式二：在postcss.config.js进行配置
module.exports = {
plugins: [
// 兼容浏览器，添加前缀
require('autoprefixer')({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
//'last 2 versions', // 所有主流浏览器最近2个版本
],grid: true})
]
}
方式三：分为两步
第一步，在posscss.config.js 文件配置
module.exports = {
plugins: [
require('autoprefixer')()
]
}
第二步，在package.json使用 browserslist 字段
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
三、常见错误
ERROR Failed to compile with 1 errors
ERROR Failed to compile with 1 errors
error in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] C:\Users\11411\Desktop\wk\iphone\src\main.js: C:\Users\11411\Desktop\wk\iphone contains
both .browserslistrc and package.json with browsers (While processing: "C:\\Users\\11411\\Desktop\\wk\\iphone\\node_modules\\@vue\\cli-plugin-babel\\preset.js")
at C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:313:15
at eachParent (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:48:18)
at Object.findConfig (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:285:20)
at Function.loadConfig (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:218:37)
at browserslist (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\index.js:411:31)
at getTargets (C:\Users\11411\Desktop\wk\iphone\node_modules\@babel\helper-compilation-targets\lib\index.js:199:48)
at module.exports (C:\Users\11411\Desktop\wk\iphone\node_modules\@vue\babel-preset-app\index.js:150:17)
at C:\Users\11411\Desktop\wk\iphone\node_modules\_@[email protected]@@babel\core\lib\config\full.js:199:14
at Generator.next (<anonymous>)
at Function.<anonymous> (C:\Users\11411\Desktop\wk\iphone\node_modules\_@[email protected]@@babel\core\lib\gensync-utils\async.js:26:3)
at Generator.next (<anonymous>)
at step (C:\Users\11411\Desktop\wk\iphone\node_modules\[email protected]@gensync\index.js:254:32)
at evaluateAsync (C:\Users\11411\Desktop\wk\iphone\node_modules\[email protected]@gensync\index.js:284:5)
at Function.errback (C:\Users\11411\Desktop\wk\iphone\node_modules\[email protected]@gensync\index.js:108:7)
at errback (C:\Users\11411\Desktop\wk\iphone\node_modules\_@[email protected]@@babel\core\lib\gensync-utils\async.js:70:18)
at async (C:\Users\11411\Desktop\wk\iphone\node_modules\[email protected]@gensync\index.js:183:31)
@ multi (webpack)-dev-server/client?http://10.172.3.102:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
错误原因分析：
根目录.browserslistrc文件，和package.json的browserslist的相关配置，两者作用相同，同时引用存在冲突。
解决办法：
删除.browserslistrc文件，在package.json中对browserslist进行配置。