react適配 rem px to rem

第一步   ：

npm install lib-flexible postcss-pxtorem -S

第二步：

運行指令展現出 webapck.config.js 文件

npm run eject
Are you sure you want to eject? This action is permanent. (y/N) y

  //安裝如下包：lib-flexible sass-loader node-sass postcss-px2rem-exclude

  //npm i lib-flexible sass-loader node-sass postcss-px2rem-exclude --save

　　運行出現報錯問題時  ：能夠在項目文件夾裏把 .git 刪除掉，便可解決

第三步：

　　在webpack.cocnfig.js 裏面引入

const pxtorem = require('postcss-pxtorem');

　　在webpack.config.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: {          // Necessary for external CSS imports to work          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('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 package.json            // which in turn let's users customize the target behavior as per their needs.    // 新增部分--------可不能夠放在 postcssNormalize()下面，你能夠自 己試試            pxtorem({
              rootValue:37.5,
              propWhiteList:[],
              minPixelValue:2,
              exclude: /node_modules/i
            }),
　　　//  https://www.npmjs.com/package/postcss-pxtorem   不懂上面函數參數意思，可翻閱    // ------------------            postcssNormalize(),
            
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },

第四步 ：

保存完代碼 啓動項目

npm start

　　而後接着報錯

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

　　這個問題是版本號太高， 你可修改  package.json

"postcss-pxtorem": "^6.0.0",  改爲 "^5.1.1"

再次從新 下載依賴   npm i    

運行項目便可  親身試驗可行！！！