如何在 ReactJs 中使用不同的文件进行不同的构建

Question

我正在尝试为具有相同代码库但样式发生变化的不同站点构建reactjs应用程序，而组件变化很少（不同站点的不同组件用于相同的工作[相同名称]）

当我构建传递参数 CLIENT=site1 的应用程序时，它应该从具有相应站点文件的公共文件中获取文件（css、组件等）并构建一个；如果 CLIENT=site2 那么它将对其文件执行此操作。文件夹结构就像

node_modules
public
  \--index.html
src
  |--resource
  |    |--common
  |    |    |--img
  |    |    \--styles
  |    |--site1
  |    |    |--img
  |    |    \--styles
  |         \--Login.js
  
  |    \--site2
  |         |--img
  |         \--styles
  |         \--Login.js

  |--App.js
  \--index.js
package.json

我尝试使用customize-cra但似乎没有运气。尝试测试config-overrides.js

const path = require('path');
const { addWebpackAlias, override } = require('customize-cra')

const resolveApp = relativePath => path.resolve(__dirname, relativePath)

module.exports = override()(
    addWebpackAlias({
        '@': path.resolve(__dirname, './src/'),
        "@a": path.resolve(__dirname, `./src/resource/${process.env.CLIENT}`),
    }),
);

 "scripts": {
       "start:build1": "set CLIENT=site1  && react-app-rewired start",
  },

只是为了测试 App.js

import './App.css';
import A from '@a/Login';

function App() {

  return (
    <div className="App">
    sss
    <Login/>
    </div>
  );
}

export default App;

但给出了类似的错误Module not found: Can't resolve '@app/Login' in

问题出在哪里。请指导