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..fdf540f88aafa0a9e01c5010b8fb56cabb8f2312
--- /dev/null
+++ b/craco.config.js
@@ -0,0 +1,71 @@
+/**
+ *@author SaoBear
+ *@action 新增
+ *@date 2021-06-29 18:08:14
+ *@description craco.config 添加craco 覆盖 webpack 设置
+ */
+const path = require("path");
+const webpack = require("webpack");
+const resolve = (dir) => path.join(__dirname, ".", dir);
+const WebpackBar = require("webpackbar");
+const CracoAntDesignPlugin = require("craco-antd");
+
+module.exports = {
+  webpack: {
+    alias: {
+      "@": resolve("src"),
+    },
+    module: {
+      rules: [
+        {
+          test: /\.scss$/,
+          use: [
+            "style-loader",
+            {
+              loader: "typings-for-css-modules-loader",
+              options: {
+                modules: true,
+                namedExport: true,
+                camelCase: true,
+                minimize: true,
+                localIdentName: "[local]_[hash:base64:5]",
+              },
+            },
+            {
+              loader: "sass-loader",
+              options: {
+                sourceMap: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+    plugins: [
+      new WebpackBar({ name: `react-store-admin`, profile: true }),
+      new webpack.WatchIgnorePlugin([/css\.d\.ts$/, /scss\.d\.ts$/]),
+    ],
+  },
+  devServer: (devServerConfig, { proxy }) => {
+    devServerConfig.proxy = {
+      ...proxy,
+      "/api": {
+        target: "http://139.198.172.231:8490/",
+        changeOrigin: true,
+      },
+    };
+    return devServerConfig;
+  },
+  plugins: [
+    {
+      plugin: CracoAntDesignPlugin,
+      options: {
+        babelPluginImportOptions: {
+          libraryName: "antd",
+          libraryDirectory: "es",
+          style: true,
+        },
+      },
+    },
+  ],
+};
diff --git a/package.json b/package.json
index fde7fda8777da383b41b55743fb5b5693d40d807..03abe296b435c06b8748ef32a5351b5a16e49cb8 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",
+    "css-loader": "^5.2.6",
     "dayjs": "^1.10.5",
     "js-cookie": "^2.2.1",
     "react": "^17.0.2",
@@ -25,13 +27,17 @@
     "react-scripts": "4.0.3",
     "redux": "^4.1.0",
     "redux-thunk": "^2.3.0",
+    "sass-loader": "^12.1.0",
     "screenfull": "^5.1.0",
-    "web-vitals": "^1.1.2"
+    "style-loader": "^3.0.0",
+    "typings-for-css-modules-loader": "^1.7.0",
+    "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 +59,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",
@@ -66,8 +73,8 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "node-sass": "^6.0.0",
+    "node-sass": "^6.0.1",
     "react-app-rewired": "^2.1.8",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.5"
   }
 }
diff --git a/src/App.css b/src/App.scss
similarity index 94%
rename from src/App.css
rename to src/App.scss
index 74b5e053450a48a6bdb4d71aad648e7af821975c..016ba351b3ddf46cdf988ac69264bd944c8c671d 100644
--- a/src/App.css
+++ b/src/App.scss
@@ -1,3 +1,5 @@
+@import '~antd/dist/antd.css';
+
 .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..e6682c8713ad7fbdec1893c450e73989d5fb72b4 100644
--- a/src/App.js
+++ b/src/App.tsx
@@ -1,7 +1,8 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import logo from "./logo.svg";
+import "./App.scss";
 
-function App() {
+const App: React.FC = () => {
   return (
     <div className="App">
       <header className="App-header">
@@ -20,6 +21,6 @@ function App() {
       </header>
     </div>
   );
-}
+};
 
 export default App;
diff --git a/src/index.css b/src/index.scss
similarity index 100%
rename from src/index.css
rename to src/index.scss
diff --git a/src/index.js b/src/index.tsx
similarity index 61%
rename from src/index.js
rename to src/index.tsx
index ef2edf8ea3fc42258464231e29140c8723458c1e..af360652912dd1d60117c8e9820c7acec15525e0 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.scss";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function
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"
+  ]
+}
diff --git a/typed-css.d.ts b/typed-css.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d474784c98e5b99d32160e3c6f5245cc8463026
--- /dev/null
+++ b/typed-css.d.ts
@@ -0,0 +1,5 @@
+// scss模块声明
+declare module "*.scss" {
+  const content: { [key: string]: any };
+  export = content;
+}