寫的挺好，直接搬過來了，驗證過，不是無腦搬運
原文

1.安裝 craco/craco

$ yarn add  @cracco/craco
# OR
$ npm install @craco/craco --save

2.修改package.json檔案

"scripts": {
//   "start": "react-scripts start",
//   "build": "react-scripts build",
//   "test": "react-scripts test",
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
}

3. 在根目錄下建立craco.config.js檔案用於修改預設配置

　　craco.config.js 和 package.json同級

my-app
├── node_modules
├── craco.config.js
└── package.json

module.exports = {
  // 配置檔案
}

一、配置別名

　　配置別名也需要修改webpack的配置，當然我們也可以藉助於 craco 來完成：

...

const path = require("path");
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
  ...
  ,
  webpack: {
    alias: {
      '@': resolve("src"),
      'components': resolve("src/components"),
    }
  }
}

在匯入時就可以按照下面的方式來使用了：

import CommentInput from '@/components/comment-input';
import CommentItem from 'components/comment-item';

二、在create-react-app中使用Less

1.安裝 craco-less (內部自動安裝 less less-loader 相關依賴)

npm install craco-less --save

2.配置 craco.config.js 檔案

const CracoLessPlugin = require("craco-less");
 
module.exports = {
  plugins: [{ plugin: CracoLessPlugin }]
};