摆脱CSS浏览器私有属性-moz, -ms, -webkit

为了兼容各个浏览器之间的私有属性,前端开发人员在写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

相关文章
相关标签/搜索