postcss-loader

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

//打包css规则
            {
                test: /\.css$/,
                /*
                css-loader:解析css文件中的@import依赖关系
                style-loader：将webpack处理之后的css内容插入到HTML的HEAD标签里
                postcss-loader:放在最后面，最早执行
                 */
                use: [ 'style-loader', 'css-loader','postcss-loader' ]
            }

//打包less的规则
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                },{
                    loader:'postcss-loader'
                }]
            },

  //打包scss规则
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                },{
                    loader:'postcss-loader'
                }]
            }

2.4创建postcss-loader配置文件

postcss.config.js

2.5在配置文件中配置autoprefixer

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

//postcss.config.js
module.exports = {
    plugins: {
        "autoprefixer": {
            "overrideBrowserslist": [
                 "ie >= 8", // 兼容IE7以上浏览器
                 "Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器
                 "chrome  >= 35", // 兼容谷歌版本号大于35浏览器,
                 "opera >= 11.5", // 兼容欧朋版本号大于11.5浏览器
            ]
        }
    }
};

查询浏览器兼容的网址caniuse

3.使用PostCSS自动将px转换成rem

https://www.npmjs.com/package/postcss-pxtorem

3.1安装postcss-pxtorem

npm install postcss-pxtorem -D

3.2在配置文件中配置postcss-pxtorem

//postcss.config.js
"postcss-pxtorem": {
            rootValue: 100, // 根元素字体大小
            propList: ['*'] // 可以从px更改到rem的属性
            // propList: ["height"]
        }

配置的相关属性

rootValue (Number) root 元素的字体大小。
unitPrecision (Number) 允许REM单位增长到的十进制数。
propList ( array ) 可以从px更改到rem的属性。
    值需要精确匹配。
    使用通配符 * 启用所有属性。 示例：['*']
    在单词的开头或者结尾使用 *。 ( ['*position*'] 将匹配 background-position-y )
    使用 与属性不匹配。! 示例：['*','letter-spacing']!
    将"非"前缀与其他前缀合并。 示例：['*','font*']!
selectorBlackList ( array ) 要忽略和离开的选择器。
    如果值为字符串，它将检查选择器是否包含字符串。
    ['body'] 将匹配 .body-class
    如果值为 regexp，它将检查选择器是否匹配正则表达式。
    [/^body$/] 将匹配 body，但不匹配 .body
replace (Boolean) 替代包含rems的规则，而不是添加回退。
mediaQuery (Boolean) 允许在媒体查询中转换 px。
minPixelValue (Number) 设置要替换的最小像素值。