diff --git a/src/App.vue b/src/App.vue
index 87001bcb7..1cce23568 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,9 +19,10 @@ export default {
     --color-danger: #ed5565;
     --menu-bg: #2f4050;
     --menu-text: #a7b1c2;
+    --menu-active-text: white;
+    --menu-active-left: #1ab394;
     --menu-hover: '#293846';
     --submenu-bg: '#1f2d3d';
     --submenu-hover: '#3b4c5b';
-    --menu-active-left: #1ab394;
   }
 </style>
diff --git a/src/styles/font-awesome/font-awesome.min.css b/src/styles/fonts/font-awesome.min.css
similarity index 100%
rename from src/styles/font-awesome/font-awesome.min.css
rename to src/styles/fonts/font-awesome.min.css
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d11b2fd60..efda25eca 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,7 +2,7 @@
 @import './transition.scss';
 @import './sidebar.scss';
 @import './menu.scss';
-@import './font-awesome/font-awesome.min.css';
+@import './fonts/font-awesome.min.css';
 
 ::-webkit-scrollbar {
   width:14px;
diff --git a/src/styles/themes/default.scss b/src/styles/themes/default.scss
deleted file mode 100644
index 31ff13f25..000000000
--- a/src/styles/themes/default.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// ElementUI
-$--color-primary: #1ab394;
-$--color-success: #1c84c6;
-$--color-info: #23c6c8;
-$--color-warning: #f8ac59;
-$--color-danger: #ed5565;
-
-// Text
-$--color-text-primary: #303133;
-$--color-text-regular: #606266;
-
-// Menu
-$menuText: var(--menu-text);
-$menuActiveLeft: var(--menu-active-left);
-$menuActiveText: white;
-$subMenuActiveText: #f4f4f5;
-$menuBg: var(--menu-bg);
diff --git a/src/styles/var.scss b/src/styles/var.scss
deleted file mode 100644
index 753acb825..000000000
--- a/src/styles/var.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/* 参考根目录下的 element-variables */
-/* 切记此处不修改配置，以element-variables为准，可适当增加自定义配置 */
-/* 如果要修改element-variables，请执行npm run build_theme更新主题 */
-@import "./element-variables.scss";
-
-:export {
-  themeColor: $--color-primary;
-  themeInfo: $--color-info;
-  themeSuccess:$--color-success;
-}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 682bef621..4557a7c8a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,5 +1,11 @@
-@import "./themes/default";
+// Color
+$--color-primary: var(--color-primary);
+$--color-success: var(--color-success);
+$--color-info: var(--color-info);
+$--color-warning: var(--color-warning);
+$--color-danger: var(--color-danger);
 
+// Text
 $--color-text-primary: #303133;
 $--color-text-regular: #606266;
 $--color-black: #000000;
@@ -8,6 +14,11 @@ $--size-base: 13px;
 $--color-link: $--color-text-primary;
 $--color-link-highlight: #23527c;
 
+// Menu
+$menuText: var(--menu-text);
+$menuActiveLeft: var(--menu-active-left);
+$menuActiveText: var(--menu-active-text);
+$menuBg: var(--menu-bg);
 $menuTextWeight: 600;
 $menuHover: var(--menu-hover);
 $subMenuBg: var(--submenu-bg);
diff --git a/src/utils/theme/color.js b/src/utils/theme/color.js
index fa0bbc6db..d45ca9b15 100644
--- a/src/utils/theme/color.js
+++ b/src/utils/theme/color.js
@@ -1,14 +1,16 @@
 import color from 'css-color-function'
 import formula from './formula.json'
 import defaultThemeConfig from './default.js'
-import variables from '@/styles/var.scss'
 
 export function generateColors(themeColors) {
   const colors = {}
+  if (!themeColors) {
+    themeColors = defaultThemeConfig
+  }
   let primaryColor = themeColors
   let subColor = defaultThemeConfig
   if (typeof themeColors === 'object') {
-    primaryColor = themeColors['--color-primary'] || variables.themeColor
+    primaryColor = themeColors['--color-primary']
     subColor = Object.keys(themeColors).length > 0 ? themeColors : defaultThemeConfig
   }
 
diff --git a/src/utils/theme/index.js b/src/utils/theme/index.js
index 272a2ad63..84eccd7cb 100644
--- a/src/utils/theme/index.js
+++ b/src/utils/theme/index.js
@@ -1,7 +1,6 @@
 import { changeMenuColor, generateColors, mix } from './color'
 import axios from 'axios'
 import formula from './formula.json'
-import variables from '@/styles/var.scss'
 
 let originalStyle = ''
 
@@ -64,7 +63,7 @@ export function changeThemeColors(themeColors) {
         axios.spread((file, extraFile) => {
           const fileData = file.data
           const extraFileData = extraFile.data.replace(/[\r\n]/g, '')
-          originalStyle = replaceStyleColors(fileData + extraFileData)
+          originalStyle = replaceStyleColors(fileData + extraFileData, themeColors)
           resolve()
         })
       )
@@ -77,8 +76,8 @@ export function changeThemeColors(themeColors) {
   })
 }
 
-export function replaceStyleColors(data) {
-  const colors = generateColors(variables.themeColor)
+export function replaceStyleColors(data, themeColors) {
+  const colors = generateColors(themeColors['--primary'])
   const colorMap = new Map()
   Object.keys(formula).forEach((key) => {
     colorMap.set(colors[key], key)
diff --git a/vue.config.js b/vue.config.js
index 272ea8528..fef719c23 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -77,15 +77,6 @@ module.exports = {
     after: require('./mock/mock-server.js')
   },
   css: {
-    loaderOptions: {
-      sass: {
-        prependData: (content, loaderContext) => {
-          const { resourcePath } = loaderContext
-          if (resourcePath.endsWith('var.scss')) return content
-          return `@import "@/styles/var.scss"; ${content}`
-        }
-      }
-    }
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that