2020-05-05 Postcss

1.什么是PostCSS?

https://www.postcss.com.cn/

PostCSS和sass/less不同, 它不是CSS预处理器PostCSS是一款使用插件去转换CSS的工具，PostCSS有许多非常好用的插件

例如autoprefixer(自动补全浏览器前缀)

postcss-pxtorem(自动把px代为转换成rem)

2.使用PostCSS自动补全浏览器前缀

2.1安装postcss-loader

npm i -D postcss-loader

2.2安装需要的插件

npm i -D autoprefixer

2.3配置postcss-loader

在css-loader or less-loader or sass-loader之前添加postcss-loader

2.4创建postcss-loader配置文件postcss.config.js

https://github.com/browserslist/browserslist#queries

2.5在配置文件中配置autoprefixer

module.exports = {

plugins: {

"autoprefixer": {

"overrideBrowserslist": [

                // "ie >= 8", // 兼容IE7以上浏览器             

               // "Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器               

               // "chrome  >= 35", // 兼容谷歌版本号大于35浏览器,

              // "opera >= 11.5" // 兼容欧朋版本号大于11.5浏览器,

                "chrome  >= 36", // 如果需要适配的浏览器完全兼容则不会添加前缀]

}

}

};