create-react-app 安装postcss-pxtorem的方法，react使用sass文件c

react-app-rewired：一个CRA再配置的工具，源自React社区，可以在不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 ~~~  没有了！！