diff --git a/.gitignore b/.gitignore
index 800f3a80c348130b74f0eacd2dbb05282ff9bbc4..960b87d28750136625736227b4855bf42075a576 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,6 @@
 
 # production
 /build
-/dist
 
 # misc
 .DS_Store
@@ -22,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
\ No newline at end of file
diff --git a/craco.config.js b/craco.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..783d5641983d403ae7a2c299600be87ff86e3262
--- /dev/null
+++ b/craco.config.js
@@ -0,0 +1,79 @@
+/**
+ *@author SaoBear
+ *@action 新增
+ *@date 2021-06-29 18:08:14
+ *@description craco.config 添加craco 覆盖 webpack 设置
+ */
+const path = require("path");
+const CracoLessPlugin = require("craco-less");
+const resolve = (dir) => path.join(__dirname, ".", dir);
+const WebpackBar = require("webpackbar");
+const CracoAntDesignPlugin = require("craco-antd");
+module.exports = {
+  webpack: {
+    alias: {
+      "@": resolve("src"),
+    },
+    plugins: [new WebpackBar({ name: `react-store-admin`, profile: true })],
+  },
+  devServer: (devServerConfig, { proxy }) => {
+    devServerConfig.proxy = {
+      ...proxy,
+      "/api": {
+        target: "http://139.198.172.231:8490/",
+        changeOrigin: true,
+      },
+    };
+    return devServerConfig;
+  },
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+      options: {
+        lessLoaderOptions: {
+          lessOptions: {
+            modifyVars: { "@primary-color": "#1DA57A" },
+            javascriptEnabled: true,
+          },
+        },
+      },
+    },
+    {
+      plugin: CracoAntDesignPlugin,
+      options: {
+        lessLoaderOptions: {
+          lessOptions: {
+            javascriptEnabled: true,
+            sourceMap: false,
+          },
+        },
+        cssLoaderOptions: {
+          modules: {
+            localIdentName: "[local]_[hash:base64:5]",
+            // 回调必须返回 `local`，`global`，或者 `pure`
+            mode: (resourcePath) => {
+              if (/pure\.(less|css)$/i.test(resourcePath)) {
+                return "pure";
+              }
+
+              if (/(global)\.(less|css)$/i.test(resourcePath)) {
+                return "global";
+              }
+
+              if (/antd/i.test(resourcePath)) {
+                return "global";
+              }
+
+              return "local";
+            },
+          },
+        },
+        babelPluginImportOptions: {
+          libraryName: "antd",
+          libraryDirectory: "es",
+          style: true,
+        },
+      },
+    },
+  ],
+};
diff --git a/package.json b/package.json
index fde7fda8777da383b41b55743fb5b5693d40d807..1581fa95b85fedfa7717f65c11bb374b578a7dfb 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
     "@types/react-router": "^5.1.15",
     "antd": "^4.16.3",
     "axios": "^0.21.1",
+    "craco-antd": "^1.19.0",
+    "craco-less": "^1.18.0",
     "dayjs": "^1.10.5",
     "js-cookie": "^2.2.1",
     "react": "^17.0.2",
@@ -26,12 +28,13 @@
     "redux": "^4.1.0",
     "redux-thunk": "^2.3.0",
     "screenfull": "^5.1.0",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^1.1.2",
+    "webpackbar": "^5.0.0-3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -53,6 +56,7 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "^6.1.2",
     "@typescript-eslint/eslint-plugin": "^4.28.0",
     "@typescript-eslint/parser": "^4.28.0",
     "antd-dayjs-webpack-plugin": "^1.0.6",
@@ -68,6 +72,6 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "node-sass": "^6.0.0",
     "react-app-rewired": "^2.1.8",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.5"
   }
 }
diff --git a/src/App.css b/src/App.less
similarity index 94%
rename from src/App.css
rename to src/App.less
index 74b5e053450a48a6bdb4d71aad648e7af821975c..63026cca9f9c5ee80b7e92eae367533043bef6cb 100644
--- a/src/App.css
+++ b/src/App.less
@@ -1,3 +1,5 @@
+@import '~antd/dist/antd.less';
+
 .App {
   text-align: center;
 }
diff --git a/src/App.js b/src/App.tsx
similarity index 80%
rename from src/App.js
rename to src/App.tsx
index 37845757234ccb68531c10cf7a2ffc589c47e342..b2ed10ba914f5c18e41a282d708c27946b30eb26 100644
--- a/src/App.js
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
+import React from "react";
+import logo from "./logo.svg";
+import "./App.less";
+const App: React.FC = () => {
   return (
     <div className="App">
       <header className="App-header">
@@ -20,6 +20,6 @@ function App() {
       </header>
     </div>
   );
-}
+};
 
 export default App;
diff --git a/src/index.js b/src/index.tsx
similarity index 100%
rename from src/index.js
rename to src/index.tsx
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6431bc5fc6b2c932dfe5d0418fc667b86c18b9fc
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..a273b0cfc0e965c35524e3cd0d3574cbe1ad2d0d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}