4 Solutions to Solve CSS Browser Compatibility Issues_Haikin Tei's Blog-CSDN Blog
Autoprefixer is a PostCSS-based plug-in that parses CSS and adds vendor prefixes to CSS rules using the values in Can I Use. It is recommended by Google and used in Twitter and Alibaba.
can realize automatic completion of css3 code, and can also be applied to sass and less
In front-end development, in order to be compatible with all browsers, some CSS properties need to be added with different browser prefixes. These properties are numerous and difficult to remember.
Of course, we can add it manually, which will make development boring, prone to errors and omissions, and may increase unnecessary debugging. This wastes time and adds a lot of unnecessary workload to yourself.
Autoprefixer can easily solve the above problems and simplify our development model.
1. Let’s take a look at the effect of Autoprefixer first
Autoprefixer processes the css code
display: flex;
Autoprefixer processed css code
display: -webkit-box;
display: -ms-flexbox;
display: flex;
2. Autoprefixer installation steps (vue-cli3)
1. Pre-dependency installation
npm install -D css-loader style-loader2. Install postcss dependencies and related dependencies
npm install -D postcss-loader autoprefixer postcss3. Configure in webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}
4. Configure autoprefixer
Method 1: Configure in 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
}
}
}
Method 2: Configure in 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})
]
}
Method three: divided into two steps
第一步，在posscss.config.js 文件配置
module.exports = {
plugins: [
require('autoprefixer')()
]
}
The second step is to use the browserslist field in package.json
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
3. Common mistakes
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
Error cause analysis:
The root directory .browserslistrc file and the related configuration of browserslist in package.json have the same function, but there are conflicts in their references.
Solution:
Delete the .browserslistrc file and configure browserslist in package.json.