以下是关于 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 配置了。