diff --git a/nezha-fronted/build/utils.js b/nezha-fronted/build/utils.js
index e534fb0fd..03a6da3b0 100644
--- a/nezha-fronted/build/utils.js
+++ b/nezha-fronted/build/utils.js
@@ -60,7 +60,14 @@ exports.cssLoaders = function (options) {
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
+    scss: generateLoaders('sass').concat(
+      {
+      loader: 'sass-resources-loader',
+      options: {
+      resources: path.resolve(__dirname, '../src/assets/stylus/index.scss')
+      }
+      }
+      ),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
   }
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 69d028fed..388e0000c 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -43,6 +43,8 @@
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
+    "sass-loader": "^7.3.1",
+    "sass-resources-loader": "^2.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
diff --git a/nezha-fronted/src/assets/stylus/index.scss b/nezha-fronted/src/assets/stylus/index.scss
new file mode 100644
index 000000000..df364a42b
--- /dev/null
+++ b/nezha-fronted/src/assets/stylus/index.scss
@@ -0,0 +1,19 @@
+// 主题色
+$color-red: #ff3333;
+$color-purple: #ff33a9;
+$color-orange: #ff8833;
+$color-blue: #3377ff;
+
+// 文字色
+$color-black: #000;
+$color-dark: #333;
+$color-deep: #555;
+$color-pl: #999999;
+$color-weak: #B3B3B3;
+$color-white: #fff;
+
+// 背景色
+$bg-bar: #F9F9F9;
+$bg-page: #F3F3F3;
+$bg-page-light: #F9F9F9;
+
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index cb1b04ac3..85eccad43 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -468,9 +468,10 @@
   }
 </script>
 
-<style scoped>
+<style scoped  lang="scss">
   .project {
     height: 100%;
+    background: $color-red;
   }
   .content-right-option {
     cursor: pointer;
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 57e3abd00..1ca871f98 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -11,7 +11,7 @@ import store from './store/index';
 import App from './App'
 import router from './router'
 
-
+import './assets/stylus/index.scss'
 import axios from 'axios';
 import {post, get, put, del} from './http.js'