Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities
introduce
This is how to configure CSS in webpack5 and the use of plug-ins, more specifically, PostCSS plug-ins. As we all know, most of the front-end projects are using Webpack to do packaging, packaging and analysis of the more important purpose is to do js transformation, such as ES6 to ES5, compression confusion, etc.. Then it is to parse CSS, such as SCSS to CSS, less to CSS, prefix auto-completion, and mobile terminal project PX to REM or PX to VW. Today we are going to show you how to auto-complete the latter prefix, px to REM, px to vw, which are very common plug-ins in PostCSS.
We can see in the example above that the styles in div are converted to REM and prefixed with compatibility, and we’ll see how.
The body of the
1. autoprefixer
It is a plugin that automatically adds prefixes to CSS. It is one of the most commonly used plug-ins in the front end. Before that, you can try it out.
Installation:
yarn add -D postcss autoprefixer
/ / or
npm install postcss autoprefixer --save-dev
Copy the codePostcss-loader: postcss-loader: postcss-loader: postcss-loader: postCSs-Loader: postCSs-Loader: postCSs-Loader: postCSs-Loader: PostCSs-Loader: PostCSs-Loader: PostCSs-Loader: PostCSs-Loader: PostCSs-Loader: PostCSs-Loader: PostCSs-Loader
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.css$/i,
use: ["style-loader",
{
loader: "css-loader"
},
{
loader: "postcss-loader".options: {
postcssOptions: {
plugins: [
require('autoprefixer') ({"overrideBrowserslist": [
"1%" >."last 7 versions"."not ie <= 8"."ios >= 8"."Android > = 4.0"]}}}]},}// ...
}
Copy the codeYou can use it directly, or you can configure Browserslist, which is the version of the browser list, to modify the version you currently support as needed.
2. postcss-pxtorem
It is a plug-in that converts CSS PX units to REM at compile time and is the most commonly used plug-in for mobile development.
yarn add -D postcss postcss-pxtorem
/ / or
npm install postcss postcss-pxtorem --save-dev
Copy the codeNext, we need to configure the plugin in postCSS-loader with the following code block:
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.css$/i,
use: ["style-loader",
{
loader: "css-loader"
},
{
loader: "postcss-loader".options: {
postcssOptions: {
plugins: [
require('postcss-pxtorem') ({rootValue: 100.selectorBlackList: [".vux-".".weui-".".mt-".".mint-".".dp-".".ig-"]}}}]},}// ...
}
Copy the codeOur common configuration is generally:
-
RootValue: Represents the font size of the root element.
-
SelectorBlackList: The prefix identification array of px selectors should be ignored and retained. For example, many third-party component libraries or templates do not need to be converted, and may destroy the original third-party style. This is a very common configuration item.
-
PropList: can convert CSS property px to rem array, default is [‘*’], also all properties can be configured, of course, do not convert the property, the following will not convert font spacing as an example:
[The '*'.'! letter-spacing'] Copy the code -
MinPixelValue: Sets the minimum pixel value to replace.
-
Exclude: Specifies the file path to be ignored and reserved as PX. Regular expressions or functions can be passed.
Of course, if we want to implement REM, we still need to introduce a REM library into the project — amfe-flexible-.js
Install amfe – flexible. Js:
yarn add amfe-flexible
/ / or
npm install amfe-flexible -S
Copy the codeimport "amfe-flexible"
import ".. /assets/style.css"
Copy the codeThis way we can change the font size of the root node based on the viewport to become an adaptive web page.
3. postcss-px-to-viewport
It is a plug-in that converts CSS PX units to VW, VH, vmin and vmax at compile time. It is also one of the most commonly used plug-ins in mobile development.
And when the project development, can not need to introduce other library files, can be used directly. However, if there is no shortage, many low-end machines in China are not ideal for VW units, so REM can be selected for more comprehensive compatibility.
yarn add -D postcss postcss-px-to-viewport
/ / or
npm install postcss postcss-px-to-viewport --save-dev
Copy the codeNext, we need to configure the plugin in postCSS-loader with the following code block:
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.css$/i,
use: ["style-loader",
{
loader: "css-loader"
},
{
loader: "postcss-loader".options: {
postcssOptions: {
plugins: [
require("postcss-px-to-viewport") ({unitToConvert: "px".// The unit to convert, default is "px"
viewportWidth: 750.// The width of the window corresponds to the width of the mobile design
// viewportHeight:667,// The height of the window corresponds to the height of our design draft
unitPrecision: 3.// The precision retained after the unit conversion
propList: [ // List of attributes that can be converted to vw
"*"].viewportUnit: "vw".// The viewport unit you want to use
fontViewportUnit: "vw".// The viewport unit used by the font
selectorBlackList: [].// CSS selectors that need to be ignored will not be converted to viewport units, using the original units such as PX.
minPixelValue: 1.// Set the minimum conversion value. If it is 1, only values greater than 1 will be converted
mediaQuery: false.// Whether the unit in the media query needs to be converted
replace: true.// Whether to replace the attribute value directly without adding the standby attribute
exclude: /(\/|\\)(node_modules)(\/|\\)/.// Ignore files under certain folders or specific files, such as files under 'node_modules'}}}]}],}// ...
}
Copy the codeOur common configuration is noted and is roughly similar to PXtorem. You can see by contrast.
conclusion
We have covered three postcss plugins for webpack5, and believe that if you use them to build your own scaffolding, your front-end development efficiency will be greatly improved.