SoFunction
Updated on 2025-04-04

Introduction to the use of Vue PostCSS

PostCSS

postcss A tool for compiling css, similar to babel's processing of js, common functions such as:

1. Use the next generation of css syntax

2. Automatically complete browser prefix

3. Automatically convert px into rem

4. css code compression, etc.

use

Create a project and initialize itnpm init -y

Create a page, a css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PostCSS</title>
    <link rel="stylesheet" href="./" rel="external nofollow" >
</head>
<body>
    <div class="box">
        <div class="box_1">Box1</div>
        <div class="box_2">Box2</div>
        <div class="box_3">Box3</div>
    </div>
</body>
</html>

css

body{
    background-color: black;
}
.box{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.box_1{
    width: 200px;
    height: 100px;
    background-color: red;
    font-size: 18px;
    &:hover{
        background-color: blue;
    }
}
.box_2{
    width: 200px;
    height: 100px;
    background-color: yellow;
}
.box_3{
    width: 200px;
    height: 100px;
    background-color: blue;
}

Installation dependencies

npm i postcss postcss-cli

run

npxIt can be used in a higher version of node

npx postcss source file name.css -o compiled file name.css

This will convert a new css file, but nothing changes

Use third-party plugin autoprefixer

Autoprefixer is a plug-in that automatically manages browser prefixes. It can parse CSS files and add browser prefixes to CSS content.

Mainly used to deal with compatibility issues

You can view the browser prefix information

npx autoprefixer --info

run

Add plug-in after -u

 npx postcss -o -u autoprefixer

If you think the above operation mode is too trash, then let’s start a new way!!!

Use third-party plugin postcss-preset-env

postcss-preset-env is a compatible browser that prefixes some css

npm i --dev postcss-preset-env

After running, you will find that it will automatically handle compatibility.

source code:

body{
    background-color: black;
}
.box{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.box_1{
    width: 200px;
    height: 100px;
    background-color: red;
    &:hover{
        background-color: blue;
    }
}
.box_2{
    width: 200px;
    height: 100px;
    background-color: yellow;
}
.box_3{
    width: 200px;
    height: 100px;
    background-color: blue;
}

After compilation

body{
    background-color: black;
}
.box{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    text-align: center;
}
.box_1{
    width: 200px;
    height: 100px;
    background-color: red;
    font-size: 1.125rem;
}
.box_1:hover{
        background-color: blue;
    }
.box_2{
    width: 200px;
    height: 100px;
    background-color: yellow;
}
.box_3{
    width: 200px;
    height: 100px;
    background-color: blue;
}

Do you think it's very convenient?

Use third-party plugin postcss-pxtorem

It is a plug-in that automatically converts px to rem

npm i --dev postcss-pxtorem

Then it will be used normally

It was like this:

.box_1{
    width: 200px;
    height: 100px;
    background-color: red;
    font-size: 18px;
   }

It's like this if you use it:

.box_1{
    width: 200px;
    height: 100px;
    background-color: red;
    font-size: 1.125rem;
}

Is so good!!!

There are so many plug-ins above to demonstrate, let me introduce how to run them conveniently:

New way to run

Create a config file

const postcssPresetEnv=require('postcss-preset-env')
={
    plugins: [
        require("autoprefixer"),
        postcssPresetEnv({
            stage:0 
        }),
        require("postcss-pxtorem"),//Unit conversion    ]
}

This will be used

Source file name.css -o compiled file name.css

If you still find it cumbersome, you can configure it in the process to simplify the running command!!

This is the end of this article about the introduction to the use of Vue PostCSS. For more related Vue PostCSS content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!