React 18 version configuration rem and vw
After countless experiments, it was finally found that the solution with better compatibility was configuration.
first step:
npm install lib-flexible postcss-pxtorem yarn add lib-flexible postcss-pxtorem
Step 2:
Next, unpack it directly-- yarn eject npm run eject
Step 3:
This step is also the most critical one. We need to configure itloader
After unpacking，You can see that there is one more in the project directory config Folders。Open config/ ：
search postcss-loader ，Add to：The following content
const loaders = [
........,
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
//
loader: ('postcss-loader'),
options: {
postcssOptions: {
// Necessary for external CSS imports to work
// /facebook/create-react-app/issues/2677
ident: 'postcss',
config: false,
plugins: !useTailwind
? [
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in
// which in turn let's users customize the target behavior as per their needs.
/* ------------------------------------------------------------------------------------------------------------------------------
[
'postcss-pxtorem',
{
rootValue: 112.5, //The maximum width of the design drawing is divided by 10 //For example, the width of 750 is written as 755. My side is 1125 width selectorBlackList: [],
propList: ['*'],
exclude: /node_modules/i
}
],
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
'postcss-normalize',
]
: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
/* ------------------------------------------------------------------------------------------------------------------------------
[
'postcss-pxtorem',
{
rootValue: 112.5, //The maximum width of the design drawing is divided by 10 //For example, the width of 750 is written as 755. My side is 1125 width selectorBlackList: [],
propList: ['*'],
exclude: /node_modules/i
}
]
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
],
},
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
]
Notice：Here rootValue: 112.5 What it means is1rem = 112.5px This is based1125pxThe design draft comes！Step 4
exist Entry file Introduced lib-flexible： import 'lib-flexible'
Restart the project file
npm run start or yarn start
Compatible with ipad
However, when you click on the iPad, you will find that there is a problem with the box compatibility, because Taobao's elastic layout solution lib-flexible is not compatible with iPad and iPad pro. We give the solution here:
Add in the head tag of public>:
In this way, we will solve the compatibility problem of iPad.
7. Modify the meta tag
In this way, our rem configuration is completed. Now you can use the upper and lower case style of the design draft, without converting it~~~ Just write the size of the design draft and just come directly from C/V, without conversion and change.
Two vw
first step:
The configuration of vw is much simpler than rem. The previous one is basically the same, so there is no need to configure compatible ipads and other things later.
1、Install dependency package npm i postcss-px-to-viewport --save-dev or yarn add postcss-px-to-viewport --save-dev 2、Unpacking This step and above configuration rem The same，先提交仓库在Unpacking git add . git commit -m 'Previous commits' Unpacking yarn eject npm run eject
Step 2:
Configure loader
After unpacking, open the config/ folder, search for postcss-loader, and add:
const loaders = [
......
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
//
loader: ('postcss-loader'),
options: {
postcssOptions: {
// Necessary for external CSS imports to work
// /facebook/create-react-app/issues/2677
ident: 'postcss',
config: false,
plugins: !useTailwind
? [
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
/* ----------------- */
require('postcss-px-to-viewport')({
viewportWidth: 1125, // Viewport width, according to the size of the design drawing viewportHeight: 1000, // Viewport height, according to the size of the design drawing unitPrecision: 6,// Keep the decimal point viewportUnit: 'vw', // Unit selectorBlackList: [], // Excluded classes minPixelValue: 1, // The minimum unit of px mediaQuery: false, // Exclude media inquiries landscapeUnit: 'vw', // Horizontal screen unit fontViewportUnit: 'vw' // Font attribute units }),
/* ----------------- */
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in
// which in turn let's users customize the target behavior as per their needs.
'postcss-normalize',
]
: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
/* ----------------- */
require('postcss-px-to-viewport')({
viewportWidth: 1125, // Viewport width, according to the size of the design drawing viewportHeight: 1000, // Viewport height, according to the size of the design drawing unitPrecision: 6,// Keep the decimal point viewportUnit: 'vw', // Unit selectorBlackList: [], // Excluded classes minPixelValue: 1, // The minimum unit of px mediaQuery: false, // Exclude media inquiries landscapeUnit: 'vw', // Horizontal screen unit fontViewportUnit: 'vw' // Font attribute units }),
/* ----------------- */
],
},
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
]This is all about this article about React 18 version configuration rem and vw. For more related React config rem and vw content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!