react create-react-app v5配置 px2rem （暴露 eject方式）

這篇具有很好參考價值的文章主要介紹了react create-react-app v5配置 px2rem （暴露 eject方式）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

環(huán)境信息：

create-react-app v5
“react”: “^18.2.0”
“postcss-plugin-px2rem”: “^0.8.1”

配置步驟：

我這個方式是 npm run eject 暴露 webpack配置的方法
1.安裝 postcss-plugin-px2rem 和 lib-flexible （注意這里安裝 postcss-px2rem、px2rem這類都行，都是 px2rem衍生的庫，不過不同的庫具體配置不一樣，建議查看文檔具體有哪些參數(shù)。查看方法可以去 npm 官網(wǎng) 搜索包名，查看詳情即可，或者問 ai 比如: 文心，gpt）

cnpm install postcss-plugin-px2rem  lib-flexible --save

2.配置config/webpack.config.js
加上這段代碼：

//px2rem的配置
const px2rem = require("postcss-plugin-px2rem");
const px2remOpts = {
	rootValue: 37.5, //這個值定義了1rem應該等于多少像素。在這里，1rem等于37.5
	exclude: /(node_module)/, //這是一個正則表達式，用于指定哪些文件應該被排除在轉換之外。在這里，所有在'node_module'目錄下的文件都將被排除。
	// mediaQuery: false, //這個選項表示是否應該在媒體查詢中轉換px單位。在這里，它被設置為false，意味著媒體查詢中的px單位將不會被轉換
	// minPixelValue: 3, //這個選項表示應該轉換的最小px值。在這里，只有px值大于或等于3的才會被轉換
};

然后在 getStyleLoaders 里加上配置（搜索 getStyleLoaders），
在 postcss-loader 下的postcssOptions 里加上

[
  px2rem(px2remOpts)
],

postcss-preset-env 同級別的。
也就是這個地方看截圖：
react create-react-app v5配置 px2rem （暴露 eject方式）,create-react-app v5,React,react.js,前端,前端框架

這一段完整的代碼：

      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
            ident: 'postcss',
            config: false,
            plugins: !useTailwind
              ? [
                  'postcss-flexbugs-fixes',
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3,
                    },
                  ],
                  [
                    px2rem(px2remOpts)
                  ],
                  // Adds PostCSS Normalize as the reset css with default options,
                  // so that it honors browserslist config in package.json
                  // 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,
                    },
                  ],
                ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        }
      }

3.在 src/index.js（入口文件引入 import ‘lib-flexible’; ）
react create-react-app v5配置 px2rem （暴露 eject方式）,create-react-app v5,React,react.js,前端,前端框架
4.public/index.html 里注釋調 meta 和加上一段兼容ipad和ipad pro 的兼容代碼。

注釋掉（注釋的原因是 lib-flexible 會自動創(chuàng)建 meta）：

<meta name="viewport" content="width=device-width, initial-scale=1" />

在 head里加上(ipad和ipad pro )：

<!-- 淘寶彈性布局方案lib-flexible不兼容ipad和ipad pro的解決方法 -->
    <script>
    /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
    </script>

這段代碼用于檢測用戶是否正在使用iPhone、iPad、iPod或iOS等蘋果設備。如果是，它將創(chuàng)建一個新的視口元標簽，并添加到HTML文檔的頭部。視口元標簽的內(nèi)容設置為 ‘target-densitydpi=device-dpi, width=480px, user-scalable=no’，這意味著它會嘗試讓頁面在各種設備上看起來相似，頁面的寬度被設置為480px，并且用戶不能手動縮放頁面。

我的 index.html 代碼如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
    <!-- 淘寶彈性布局方案lib-flexible不兼容ipad和ipad pro的解決方法 -->
    <script>
    /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
  
</html>

react create-react-app v5配置 px2rem （暴露 eject方式）,create-react-app v5,React,react.js,前端,前端框架
5.重新運行 npm start 審查元素看看 px 是不是被轉換成了rem。如果轉換成功說明，配置成功了。
可以在 App.js 里加上一個div然后在 App.css 里寫上一個width,height然后用到 div上。

.box{
  width: 100px;
  height: 100px;
  background: red;
}

react create-react-app v5配置 px2rem （暴露 eject方式）,create-react-app v5,React,react.js,前端,前端框架
運行之后的效果截圖：
從100px轉換成了1.333rem ，當切換時，他也跟著變大變小。

rootValue 的計算方式：

rootValue=設計圖的寬度/10
我是 375*812的設計圖所以就是 375/10=37.5
計算rem值時，應該將屏幕寬度除以10作為基準值。

postcss-plugin-px2rem 詳細配置：

postcss-plugin-px2rem是一個PostCSS插件，用于將px單位轉換為rem單位。該插件提供了以下參數(shù)：

rootValue：指定根元素字體大小的值，默認為16。該值用于將px轉換為rem，例如，當rootValue設置為16時，10px會被轉換為0.625rem。

unitPrecision：指定轉換后的rem值保留的小數(shù)位數(shù)，默認為5。

propList：指定需要轉換的CSS屬性，默認為[‘*’]，表示所有屬性都會被轉換。你可以將其設為只轉換某些屬性，例如[‘font-size’]只轉換字體大小屬性。

selectorBlackList：指定不需要轉換的選擇器，可以是字符串或正則表達式。例如，你可以將其設置為[‘.no-rem’]來防止某些元素被轉換。

replace：指定是否替換原始的px值，默認為true。如果設置為false，則會在原始值后面添加轉換后的rem值，例如10px會被轉換為10px /* 0.625rem */。

mediaQuery：指定是否在媒體查詢中也進行轉換，默認為false。

minPixelValue：指定最小轉換單位的px值，默認為0。如果設置為2，則不會將1px轉換為0.0625rem等非常小的值。

以下是一個postcss-plugin-px2rem插件的配置示例：

const px2rem = require('postcss-plugin-px2rem');
const postcssOptions = {
  plugins: [
    px2rem({
      rootValue: 16,
      unitPrecision: 5,
      propList: ['*', '!font-size'],
      selectorBlackList: ['.no-rem'],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    })
  ]
};