In depth webpack 5 and other building tools Series II (8) - Introduction and command line use of postcss

This is my participation 8 The fourth of the yuegengwen challenge 21 God , Check out the activity details ：8 Yuegengwen challenge

Last article We talked about a very important tool ——browserslist, so to speak , In the current projects involving front-end engineering , Will use this tool . And we're installing webpack when , This tool has also been installed for us . Of course , We have already said , This tool is actually with the help of caniuse-lite This little tool to help us Query the browser to be adapted Of . however , We don't need to use this directly caniuse-lite Tools , We just need to use browserslist This tool is OK （ For example, run the command at the command line terminal npx browserslist View which browsers match the criteria configured in the current project ;（MacOS On ） Run the command npx browserslist "> 1%, last 2 versions, not dead" To verify which browsers match the criteria passed in the command ）.

Again ,browserslist This tool is very important （ Help us query the browser to be adapted , And many tools （babel、postcss etc. ） Will rely on it to query ）, You must know how to use it , It's better to know how it works （ That is, how to query , We also talked about it in the last chapter ）. Because what we're going to talk about later postcss And what I'm going to talk about later babel In fact, they all use this browserslist The tool .

below , One of the tools we're going to talk about will also be in webpack It is used in , In many other places, such as gulp、rollup It will also be used inside , This tool is PostCSS.

• What is? PostCSS Well ？

  • PostCSS It's a pass JavaScript Come on Convert style Tools for （ In other words, there are actually some js Code , adopt js Code to make some transformations to the style ）, And it's a stand-alone tool （ That is, it can be used alone ）;
  • This tool can help us to do some CSS Conversion and adaptation of , such as Automatically add browser prefix （ So that some styles can be adapted to multiple browsers ）、css Style reset （ To unify certain styles in multiple browsers ）;
  • But realizing these functions , We need to rely on PostCSS Corresponding plug-in （ because PostCSS There are very few things you can do , To achieve a function , You must rely on the corresponding... Written for this function PostCSS plug-in unit ）;

• How to use PostCSS Well ？ There are two main steps ：

  • First step ： lookup PostCSS Extensions in build tools , such as webpack Medium postcss-loader（ Only through this loader In order to introduce postcss This tool , And then in webpack For use in ）;
  • The second step ： Choose what you need to accomplish a particular function PostCSS Related plug-ins , And then add （ Configure the plug-in to a certain location , Give Way postcss The tool can load the plug-in when it is in use ）;

below , Let's demonstrate how to use it alone PostCSS（ Do not rely on webpack） The process of , We use this tool directly to prefix a style .

Command line postcss

• Can we use it directly at the terminal PostCSS Well ？

  • It's OK, too , But we need to install a separate tool ——postcss-cli（ Because only this tool is installed , To use... On the command line postcss, there cli yes command line interface It means ）

good , First, let's install postcss（ With postcss, You can use it later ）, Run the command at the command line terminal ：

npm install postcss -D
 Copy code 

good , installed postcss in the future , Project node_modules There are already... In the directory postcss 了 , Now you can use it , however , It's not easy to use directly here （ That is, it can't run directly npx postcss）, It also needs to be installed postcss-cli This tool . Only installed postcss-cli, To use... On the command line postcss（ install postcss-cli The purpose of is to use... On the command line postcss）.

npm install postcss-cli -D
 Copy code 

installed postcss-cli after , We can use it .

We are ./src/css New under the directory test.css file , Write the following code inside ：

/* :fullscreen： A pseudo class , You can select all the elements in the full screen . If you want to adapt multiple browsers , Need to add browser prefix  */
:fullscreen {

}

.content {
  /*  Use  user-select, You also need to add a browser prefix  */
  user-select: none;
  /*  Use  transition, Because many browsers now support it , So you can add browser prefix or not  */
  transition: all 2s ease;
}
 Copy code 

Add ： You may ask , Which things need to be prefixed with browsers , What things don't need a browser prefix ？ Here is a website ——autoprefixer.github.io/, We can test and view... On this website .

good , above test.css The code in the file should be prefixed with the browser , Then we will use postcss Process the above code , To add the corresponding browser prefix to the relevant code . How to deal with it ？ We can run the following command ：

npx postcss -o result.css ./src/css/test.css
 Copy code 

The above command is explained below ：

• npx postcss： Equivalent to performing ./node_modules/.bin/postcss.cmd（MacOS In Chinese, it means postcss）;
• -o： Indicates the output path , Followed by the output path , Here is the output to the... In the current directory result.css In file ;
• ./src/css/test.css： Means to use postcss Documents processed ;

All in all ： use postcss Yes ./src/css/test.css To deal with , After processing, output to result.css.

After running the above command , The effect is as follows ：

You can see that... Is generated in the current directory result.css file , It does generate content , however , No browser prefix was added . Why is this ？ Actually , When running the above command , The prompt message in the terminal has told us the reason , As we have said before ,postcss The tool itself can do very little , If we need it to help with something extra , You must rely on some plug-ins corresponding to this tool （ That means you have to tell postcss Which plug-ins to use , Then these plug-ins help us to carry out specific operations ）. What plug-ins do we need now ？ We need a plug-in to prefix the style ——autoprefixer. below , First install the plug-in ：

npm install autoprefixer -D
 Copy code 

After installation , Let's run the previous command again , But this time we have to pass --use Parameters tell PostCSS The plug-ins to be used in this process ：

npx postcss --use autoprefixer -o result.css ./src/css/test.css
 Copy code 

（ Be careful ： The prerequisite for running the above command is that autoprefixer 了 , After installation , Run the above command ,PostCSS Will find this plug-in .）

After running the above command , The effect is as follows ：

You can see , This time, the prompt just now will not appear again , and ,:fullscreen and user-select Also added a browser prefix , however , there transition No browser prefix added , This is because the current browsers to be adapted already support transition 了 , Then there is no need to add a prefix in this case .（ I'm trying to .browserslistrc Some conditions have been modified in the test , As a result, I still didn't give transition Add prefix , It may be used directly at the command line terminal postcss I don't read .browserslistrc This file ......） but transition This attribute is really related to the browser we want to adapt , If the browser to be adapted does not support transition, It will be given to transition Add the prefix , And if you support , Nothing will be added .

above , It's about using... Directly on the command line postcss, At the same time combined with autoprefixer This plugin , How to add browser prefix to our style .