为了兼容各个浏览器之间的私有属性,前端开发人员在写css的时候须要给一些css属性添加多个私有前缀,很是麻烦。这里给你们分享一个简单的方法能够让你之后无需手动给CSS添加私有属性。css
-moz
表明firefox浏览器私有属性-ms
表明IE浏览器私有属性-webkit
表明chrome、safari私有属性-o
表明opera私有属性
项目目录内终端下输入前端
yarn add postcss
项目根目录下新建postcss.config.js
文件
postcss.config.jswebpack
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [
autoprefixer(),
]
}
打开webpack.config.js
添加如下代码web
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}
保存便可。chrome