current position:Home>In depth webpack 5 and other building tools Series II (8) - Introduction and command line use of postcss
In depth webpack 5 and other building tools Series II (8) - Introduction and command line use of postcss
2021-08-27 07:45:56 【Advanced of florist】
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 passJavaScript
Come on Convert style Tools for ( In other words, there are actually somejs
Code , adoptjs
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 ( becausePostCSS
There are very few things you can do , To achieve a function , You must rely on the corresponding... Written for this functionPostCSS
plug-in unit );
-
How to use
PostCSS
Well ? There are two main steps :- First step : lookup
PostCSS
Extensions in build tools , such aswebpack
Mediumpostcss-loader
( Only through thisloader
In order to introducepostcss
This tool , And then inwebpack
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 Waypostcss
The tool can load the plug-in when it is in use );
- First step : lookup
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 linepostcss
, therecli
yescommand line interface
It means )
- It's OK, too , But we need to install a separate tool ——
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 meanspostcss
);-o
: Indicates the output path , Followed by the output path , Here is the output to the... In the current directoryresult.css
In file ;./src/css/test.css
: Means to usepostcss
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 .
copyright notice
author[Advanced of florist],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827074551280X.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich