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

ゝ一纸荒年。 2021-12-14 05:07 551阅读 0赞

[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会为页面根据屏幕自动添加<meta name='viewport' >标签，
         * 动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
         * 安装完成之后再入口index.js页面 import lib-flexible
         * 注意事项（important）: 由于flexible会动态给页面header中添加<meta name='viewport' >标签，
         * 所以务必请把目录 public/index.html 中的这个标签删除！！！
         */
    
         /**
          * [postcss-px2rem]
          * npm install postcss-px2rem --save
          * postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，
          * 根据<html>标签的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 ~~~  没有了！！

[react-app-rewired]: https://github.com/timarney/react-app-rewired