postcss后处理器配置autoprefix

postcss后处理器配置autoprefix

前言scss为css的预处理器拉，其实就是让css可以使用变量而已，那么postcss就是后处理器拉
本文讲的就是他的autoprefix插件可以自动添加浏览器css前缀

安装

cnpm i -D sass node-sass postcss-cli autoprefix
cnpm i -D postcss postcss-cli autoprefix

package.json

 "scripts": {
    "build": "node-sass style.scss style.css --output-style expanded && postcss style.css -o style.css"
  },

browserslist

 "browserslist": [
    "last 5 Firefox versions",
    "Safari >= 6",
    "ie >= 8",
    "Edge 16",
    "> 1%",
    "last 1 Android versions",
    "last 1 ChromeAndroid versions",
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 iOS versions",
    "last 2 Edge versions",
    "last 2 Opera versions"
    ],

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

style.scss

a{
  transition :transform 1s
}

body {
  user-select: none
}

style.css

a {
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}

body {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}