创建React App (不弹出)& ANTD Design & SCSS & Create App Rewired

创建React App 是一个用于快速搭建React项目的命令行工具。它提供了一种快速创建React应用程序的方式，并集成了大量的开发工具和配置，以便开发人员可以专注于业务逻辑而不用担心构建和配置项目。

React是一个流行的JavaScript库，用于构建用户界面。它的特点是组件化、高效和灵活，使得开发人员可以更加轻松地构建可复用的UI组件。

ANTD Design是一个React UI组件库，提供了丰富的可定制化的UI组件，适用于构建现代化的Web应用程序。它的特点是简洁、美观、易用，可以帮助开发人员快速构建漂亮的用户界面。

SCSS是一种CSS预处理器，它扩展了CSS的功能，提供了变量、嵌套、混合、继承等功能，使得CSS代码更加可维护和可复用。

Create App Rewired是一个用于自定义Create React App配置的工具。它允许开发人员在不弹出Create React App配置的情况下进行自定义配置，例如修改webpack配置、添加自定义插件等。

以上工具和技术的组合可以帮助开发人员快速搭建React应用程序并实现丰富的UI界面。使用Create React App可以快速创建React项目的基础结构，ANTD Design提供了丰富的可定制化的UI组件，SCSS可以提高CSS的可维护性和可复用性，而Create App Rewired可以让开发人员在不修改Create React App配置的情况下进行自定义配置。

对于创建React App项目并集成ANTD Design和SCSS，可以按照以下步骤操作：

确保已安装Node.js和npm。
打开命令行工具，进入要创建项目的目录。
运行以下命令来创建一个新的React App项目：

npx create-react-app my-app

cd my-app

安装ANTD Design和SCSS依赖：

npm install antd node-sass

在src目录下创建一个新的文件夹，例如styles，用于存放SCSS文件。
在styles文件夹中创建一个新的SCSS文件，例如main.scss，用于编写自定义的样式。
修改src/index.js文件，引入ANTD Design的样式和自定义的SCSS文件：

import 'antd/dist/antd.css';
import './styles/main.scss';

使用Create App Rewired自定义配置，首先安装react-app-rewired：

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

在项目根目录创建一个新的config-overrides.js文件，用于进行自定义配置。
在config-overrides.js文件中，添加以下代码来启用SCSS支持：

const sassLoaderMatcher = function (rule) {
  return rule.test && rule.test.toString() === '/\\.scss$/';
};

const addSassSupport = (config) => {
  const rules = config.module.rules;
  const oneOfRule = rules.find(rule => rule.oneOf);
  if (oneOfRule) {
    const sassRule = {
      test: /\.scss$/,
      use: [
        require.resolve('style-loader'),
        require.resolve('css-loader'),
        require.resolve('sass-loader')
      ]
    };
    oneOfRule.oneOf.unshift(sassRule);
  }
  return config;
};

module.exports = {
  webpack: function (config, env) {
    const rules = config.module.rules;
    rules.forEach(rule => {
      if (Array.isArray(rule.oneOf)) {
        const sassRule = rule.oneOf.find(sassLoaderMatcher);
        if (sassRule) {
          rule.oneOf.splice(rule.oneOf.indexOf(sassRule), 1);
        }
      }
    });
    return addSassSupport(config);
  }
};

修改package.json文件中的scripts，将start、build和test命令改为使用react-app-rewired：

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