react-app-rewired 自定义 create-react-app 配置

470 阅读1分钟

以下是关于 react-app-rewired 的使用说明的 Markdown 文档:


使用 react-app-rewired 自定义 create-react-app 配置

react-app-rewired 是一个用于自定义 create-react-app 的配置而不需要执行 eject 的工具。它允许你在不修改 create-react-app 的基本配置的情况下,对项目进行个性化配置。

安装

npm install react-app-rewired --save-dev

创建配置文件

在项目根目录下创建一个 config-overrides.js 文件,用于编写自定义配置。

修改 package.json

修改 package.json 中的 scripts 部分:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

编写自定义配置

config-overrides.js 中编写自定义配置,例如自定义 rem 配置:

const { override, addPostcssPlugins } = require('customize-cra');
const px2rem = require('postcss-px2rem-exclude');

module.exports = override(
  addPostcssPlugins([
    px2rem({
      remUnit: 75, // 设计稿宽度的1/10,例如设计稿宽度750,则设置为75
      exclude: /node_modules/i // 排除 node_modules 目录下的文件
    })
  ])
);

现在,你可以在 create-react-app 项目中使用 react-app-rewired 进行自定义 rem 配置了。