擺脫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

相關文章
相關標籤/搜索