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