react 不使用eject暴露配置（配置less或@/路径），使用react-app-rewired + customize-cra或@craco/craco

react-app-rewired + customize-cra

在项目中使用过 ant design的应该知道，可以使用react-app-rewired和 customize-cra这两个工具库来进行自定义配置。

对于 create-react-app1.x需要使用 react-app-rewired@1.62，而因为各自版本升级的原因，在到 react-app-rewired@2.x版本的时候只保留了核心的功能，在这个commit你可以看到移除了 rewire helper 的功能函数。因此你需要借助customize-cra来自定义 CRA v2+以上的配置。

首先安装依赖：

yarn add react-app-rewired customize-cra

打开文件package.json修改配置：

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",

react-app-rewired修改完package.json文件后，yarn run start报错，无法运行

• 修改package.json后没有重新运行npm install或yarn install来确保依赖关系正确更新。
• 修改package.json后没有正确使用react-app-rewired。

解决方法：

• 重新运行npm install或yarn install来确保依赖关系正确更新。(主要)

• 确保在项目根目录中创建了一个config-overrides.js文件，并在该文件中实现了自定义配置。

• 如果以上步骤都正确无误，尝试删除node_modules文件夹文件，然后重新执行npm install或yarn install。

项目根目录创建 config-override.js并写入配置：

// confit-override.js
// 按需加载组件代码和样式
// addLessLoader 来帮助加载 less 样式，帮助自定义主题
// 使用插件让 Day.js 替换 momentjs 减小打包大小,
const { override, fixBabelImports,addWebpackPlugin, addLessLoader } = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const path = require('path');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
   addLessLoader({
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1DA57A' },
    }),
    addWebpackPlugin(new AntdDayjsWebpackPlugin())
);

或

添加alias别名

在平时项目开发中，经常性会遇见引用组件或者工具函数时会出现这样的情况：

import Dome from ‘…/…/…/…/dome’

而alias别名的设置，会让这更为方便的引用。config-override.js文件

const { override, addDecoratorsLegacy, addWebpackAlias, addWebpackModuleRule } = require("customize-cra");
const path = require("path");

module.exports = {
  webpack: override(
    addDecoratorsLegacy(),
    addWebpackAlias({
      "@": path.resolve(__dirname, './src'),
      "@style": path.resolve(__dirname, './src/style'),
      "@axios": path.resolve(__dirname, './src/axios'),
      "@imgs": path.resolve(__dirname, './src/style/imgs'),
      "@store": path.resolve(__dirname, './src/store'),
      "@pages": path.resolve(__dirname, './src/pages'),
      "@utils": path.resolve(__dirname, './src/utils'),
      "@context": path.resolve(__dirname, './src/context'),
      "@hooks": path.resolve(__dirname, './src/hooks'),
      "@types": path.resolve(__dirname, './src/types'),
      "@components": path.resolve(__dirname, './src/components')
    }),
    addWebpackModuleRule({
      test: /\.scss$/,
      use: [ 'style-loader', 'css-loader', 'sass-loader' ]
    })
  )
}

如果是TS项目，注意需要在 tsconfig.json中进一步设置，如果直接在 tsconfig.json 文件中直接设置 paths 属性，当重新run 的时候，属性又会被删除的场景。CRA issue 中的解决方式（不报错就不用）
tsconfig.json文件

	 "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@pageModule/*": ["src/components/pageModule/*"],
      "@pages/*": ["src/pages/*"],
      "@style": ["src/style"],
      "@style/*": ["src/style/*"],
      "@store": ["src/store"],
      "@store/*": ["src/store/*"],
      "@imgs": ["src/style/imgs"],
      "@imgs/*": ["src/style/imgs/*"],
      "@axios": ["src/axios"],
      "@axios/*": ["src/axios/*"],
      "@utils": ["src/utils"],
      "@utils/*": ["src/utils/*"],
      "@context": ["src/context"],
      "@context/*": ["src/context/*"],
      "@hooks": ["src/hooks"],
      "@hooks/*": ["src/hooks/*"]
    },
    "typeRoots": ["src/types"],
    //生成装饰器
    "experimentalDecorators": true,
    //生成装饰器元数据
    "emitDecoratorMetadata": true,
    "types": [ "node"]

CRA issue 中的解决方式：
在根目录下新建·paths.json·,文件名自定义

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

然后在tsconfig.json里加入：

{
	"compilerOptions": {},
	"extends": "./paths.json"
}

重启项目
ctrl+单击，跳转对应路径

//有from 可以跳转
import Dome from "@/pages/dome";
//无from 不可跳转
import "@/style/dome.css";

@craco/craco

安装依赖：

yarn add @craco/craco 

同样修改 package.json scripts:
使用craco替代react-scripts

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
}

修改alias别名

根目录创建craco.config.js 并写入配置

//craco.config.js
const path = require('path');
const resolve = dir => path.join(__dirname, '.', dir);

module.exports = {
 ...
 webpack: {
 	alias: {
  	 'src': resolve('src')
  }
 }
 ...
}