在Nuxt.js中添加PostCSS自动前缀器

本文主要是介绍在Nuxt.js中添加PostCSS自动前缀器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在其他浏览器中，有些 CSS 属性需要带有前缀。如-webkit- | -o- | -ms- 等等

Autoprefixer 是一个 PostCSS 插件，可以将你的CSS代码渲染到浏览器中自动补充厂商前缀，因此你不用担心自己编写的CSS代码有浏览器兼容性问题。

如：

.flex-row {display: flex;flex-direction: row;
}

到：

.flex-row {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;
}

PostCSS autoprefixer 插件已经保留Nuxt.js项目中。

以下是 PostCSS autoprefixer 添加到您的项目的方法。

在文本编辑器中打开 package.json文件，并在页面的最底部添加一个浏览器列表：

浏览器列表：

"browserslist": [">0.3%","not ie 11","not dead","not op_mini all","last 3 version","Chrome >= 35","Firefox >= 38","Edge >= 10","Explorer >= 10","ie >= 10","iOS >= 8","Safari >= 8","Android 2.3","Android >= 4","Opera >= 12"]

更新您的：package.json

{"name": "nuxt-app","private": true,"type": "module","scripts": {"build": "nuxt build","dev": "nuxt dev","generate": "nuxt generate","preview": "nuxt preview","postinstall": "nuxt prepare"},"dependencies": {"animate.css": "^4.1.1","nuxt": "^3.10.3","sass": "^1.74.1","vue": "^3.4.21","vue-router": "^4.3.0"},"devDependencies": {"dotenv": "^16.4.5","prettier": "3.2.5","sass-loader": "^14.1.1"},"browserslist": [">0.3%","not ie 11","not dead","not op_mini all","last 3 version","Chrome >= 35","Firefox >= 38","Edge >= 10","Explorer >= 10","ie >= 10","iOS >= 8","Safari >= 8","Android 2.3","Android >= 4","Opera >= 12"]
}

在浏览器查看效果