关于scss: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;
}