create-react-app postcss-pxtoremをインストールする方法、reactはsassファイルcを使用します

react-app-rewired:Reactコミュニティに由来するCRA再構成ツールで、ejectなしでCRA足場を構成して作成したappをカスタマイズできます.原理は簡単で、プロジェクトルートディレクトリの下にコンフィギュレーションファイル(config-overrides.js)を新規作成し、webpackの構成をconfigオブジェクトとしてreact-app-rewiredに転送し、config-overridesの構成で修正し、修正したconfigオブジェクトでプロジェクトをパッケージします.
スタート

create-react-app apppage

cd apppage 
yarn start

プロジェクトの構築が完了したら、次のものをインストールします.

yarn add react-app-rewired --save-dev

yarn add customize-cra --save-dev

 /*   package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
-   "eject": "react-scripts eject"
}

取付babel-plugin-import

yarn add babel-plugin-import --save

 安装 postcss-pxtorem

npm install postcss-pxtorem --save

ルートディレクトリにconfig-overridesを作成する.js、コードを追加:

/**
 * [description]
 *    create-react-app（    cra）      ，  react          ，
 *           react-app-rewired,          webpack
 *   ！react-app-rewired2.x  ，    injectBabelPlugin   ，    customize-cra。
 * npm install customize-cra --save-dev     yarn add customize-cra --dev
 *     config-overrides.js        
 */
const { override, fixBabelImports,addPostcssPlugins } = require('customize-cra');

/**
 * [      sourcemap description]
 * [                   css js map  ，  sourcemap]
 */
// process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
  addPostcssPlugins([require('postcss-pxtorem')({
                               rootValue: 16,
                               propList: ['*']
                               // propList: ['*', '!border*', '!font-size*', '!letter-spacing'],
                               // propWhiteList: []
                            }),])

    /**
     * [  less]
     * npm i less
     * npm i -D less-loader
     */
    // addLessLoader({
    //   javascriptEnabled: true,
    //   modifyVars: { '@primary-color': '#1DA57A' },
    // }),

    /**
     * [remUnit description]
     * npm install lib-flexible --save
     * flexible              ，
     *     initial-scale，maximum-scale，minimum-scale     。
     *          index.js   import lib-flexible
     *     （important）:   flexible      header     ，
     *          public/index.html         ！！！
     */

     /**
      * [postcss-px2rem]
      * npm install postcss-px2rem --save
      * postcss-px2rem  px   rem，rem             ，
      *      font-size       ，1rem=html   font-size 。
      */

    // addPostcssPlugins([
    //   require("postcss-px2rem")({ remUnit: 37.5 })
    // ])

    /**
     * [description]
     *     ： remUnit            ？？？                ，     ，    。
     *           750，       remUnit   75，        ，               1:1    。
     *            37.5 ？？？         ！
     *      37.5，      mint-ui      UI  ，           px2rem ，
     *  remUnit          （   750px）75   ，   1:1  mint-ui   ，         ，       。
     *       37.5            ，           。
     */
 );

新しいrem.jsファイル

const baseSize = 32
//    rem   
function setRem () {
  //           750       ，         。
  const scale = document.documentElement.clientWidth / 750
  //            
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
//    
setRem()
//             rem
window.onresize = function () {
  setRem()
}

srcディレクトリの下のindex.jsはrem.jsを導入する
完成!~~
sassの使用

yarn add node-sass

sassとして接尾辞を付けたファイルを追加

.App 
  text-align: center;
  height: 300px;

scssも使えます

.App {
  text-align: center;
  height: 300px;
}

OK~~~ない!!