react-app-rewire-postcss使用指南

react-app-rewire-postcss使用指南

react-app-rewire-postcss Configure PostCSS in Create React App without ejecting 项目地址: https://gitcode.com/gh_mirrors/re/react-app-rewire-postcss

1. 项目目录结构及介绍

该GitHub仓库csstools/react-app-rewire-postcss已经不再活跃且被归档，但在其历史版本中，我们可以推断一个典型的结构和功能，适用于基于Create React App（CRA）并使用react-app-rewired进行自定义配置的场景。尽管实际仓库已不可变，以下是一个常见React应用结合此插件可能拥有的目录结构概述：

my-react-app/
├── node_modules/
│   <!-- 第三方依赖包 -->
├── public/
│   ├── index.html
│   <!-- 公共静态资源 -->
├── src/
│   ├── components/
│   │   <!-- 项目组件代码 -->
│   ├── styles/
│   │   <!-- CSS 或其他样式文件 -->
│   └── index.js
│       <!-- 应用入口文件 -->
├── package.json
├── package-lock.json
├── README.md
└── config-overrides.js
    <!-- 使用react-app-rewired的核心配置文件 -->

• node_modules: 存放所有项目依赖。
• public: 包含HTML模板和其他不需要编译的公共资产。
• src: 主要源代码存放地，包括JavaScript组件和样式表。
• package.json: 定义了项目的元数据，脚本命令和依赖项。
• config-overrides.js: 使用react-app-rewired时，所有的配置重写都发生在这个文件里。

2. 项目启动文件介绍

在传统的Create React App中，启动应用是通过npm或yarn命令执行start脚本来完成的。但当使用react-app-rewired时，你需要修改这个逻辑以指向config-overrides.js中的配置。启动流程通常不会直接改变，但背后的配置过程变得可定制：

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

这里的start命令会调用react-app-rewired的自定义启动流程，它允许你在不eject的情况下调整webpack和Babel配置。

3. 项目的配置文件介绍

config-overrides.js

config-overrides.js是接入react-app-rewire-postcss的关键文件，让你能够添加PostCSS插件到你的构建流程中。下面是一个基本的示例结构，展示如何添加此插件：

module.exports = function override(config, env) {
  // 引入postcss插件支持
  const rewirePostCss = require('react-app-rewire-postcss');
  config = rewirePostCss(config, {
    // 添加你需要的PostCSS插件，例如autoprefixer
    plugins: [
      require('autoprefixer') /* 可替换为你需要的任何PostCSS插件 */
    ],
  });

  return config;
};

在此配置文件中，通过引入react-app-rewire-postcss模块，并调用其提供的函数来修改原有的webpack配置，你可以轻松集成PostCSS及其相应的插件，无需直接对Create React App默认配置进行大的变动。

请注意，具体配置细节可能会随着react-app-rewired和相关插件版本更新而有所变化，务必参考最新的文档进行相应调整。由于仓库已归档，确保查阅最新版本的说明或者寻找替代方案来实现相同目的。

react-app-rewire-postcss Configure PostCSS in Create React App without ejecting 项目地址: https://gitcode.com/gh_mirrors/re/react-app-rewire-postcss