介绍

postcss是css界的Babel,能够转译css,增强浏览器的兼容性

安装

安装postcss

pnpm add postcss

安装postcss命令行工具

pnpm add postcss-cli

编译css文件

npx postcss style.css -o dist.css

style.css为要编译的文件 dist.css为编译后的文件

    /*style.css  */
   .box {
        /* 盒模型 */
        box-sizing: border-box; 
        /* 背景渐变 */
        background: linear-gradient(#000, #fff);
    }

    /*dist.css  */
   .box {
        /* 盒模型 */
        box-sizing: border-box; 
        /* 背景渐变 */
        background: linear-gradient(#000, #fff);
    }
    /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJkaXN0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ib3gge1xyXG4gICAgLyog55uS5qih5Z6LICovXHJcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94OyBcclxuICAgIC8qIOiDjOaZr+a4kOWPmCAqL1xyXG4gICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KCMwMDAsICNmZmYpO1xyXG59Il19 */

配置postcss.config.js

autoprefixer 自动补齐浏览器前缀

安装autoprefixer

pnpm add autoprefixer -D

新建并配置postcss.config.js

import autoprefixer from "autoprefixer";
export default {
  plugins: [
    autoprefixer()
  ],
}  

package.json设置兼容浏览器的版本

    "browserslist": [
        "cover 99.5%"
    ]

编译style.css

npx postcss style.css -o dist.css

style.css为要编译的文件 dist.css为编译后的文件

    /*style.css  */
   .box {
        /* 盒模型 */
        box-sizing: border-box; 
        /* 背景渐变 */
        background: linear-gradient(#000, #fff);
    }

    /*dist.css  */
   .box {
        /* 盒模型 */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
                box-sizing: border-box; 
        /* 背景渐变 */
        background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff));
        background: -webkit-linear-gradient(#000, #fff);
        background: -moz-linear-gradient(#000, #fff);
        background: linear-gradient(#000, #fff);
    }

从上面可以看出，autoprefixer已经自动帮我们补齐了浏览器前缀，这样就可以让我们节省很大的时间去处理浏览器的兼容性

postcss-preset-env 自动处理css新特性

postcss-preset-env与babel-preset-env的功能类似，能帮助我们处理css的新特性，防止浏览器不兼容

安装postcss-preset-env

pnpm add postcss-preset-env -D

配置postcss.config.js

import autoprefixer from "autoprefixer";
import postcssPresetEnv from "postcss-preset-env";

export default {
    plugins: [
        autoprefixer(),
        postcssPresetEnv({
            stage:0  //关于stage的作用，0 - 4 ，越小代表css语法特性越新
        })
    ],
}   

编译style.css

npx postcss style.css -o dist.css

style.css为要编译的文件 dist.css为编译后的文件

    /*style.css  */
   .box {
        background: #ffffff;
        &:hover{
            background: #000000;
        }
    }

    /*dist.css  */
   .box {
        background: #ffffff;
    }
    .box:hover{
        background: #000000;
    }

可以看出，postcss-preset-env自动帮我们处理了&:

postcss-pxtorem px转rem,解决屏幕适配

安装postcss-pxtorem

pnpm add postcss-pxtorem -D

配置postcss.config.js

import autoprefixer from "autoprefixer";
import postcssPresetEnv from "postcss-preset-env";
import pxToRem from 'postcss-pxtorem'

export default {
    plugins: [
        autoprefixer(),
        postcssPresetEnv({
            stage:0
        }),
        pxToRem()
    ],
}

编译style.css

npx postcss style.css -o dist.css

style.css为要编译的文件 dist.css为编译后的文件

    /*style.css  */
   .box {
        background: #ffffff;
        font-size: 20px;
        &:hover{
            background: #000000;
            font-size: 22px;
        }

    }

    /*dist.css  */
   .box {
        background: #ffffff;
        font-size: 1.25rem;
    }

    .box:hover {
        background: #000000;
        font-size: 1.375rem;
    }

插件自动帮我们将px转成rem了，以前我可是手动改过的！！！！

好了，你已经学会postcss啦，简单吧！