diff --git a/webintroduce/build/utils.js b/webintroduce/build/utils.js
index e534fb0..f61e576 100644
--- a/webintroduce/build/utils.js
+++ b/webintroduce/build/utils.js
@@ -60,7 +60,15 @@ 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/css/mixin.scss'),
+          //path.resolve(__dirname,'../src/assets/css/variables.scss')
+        ]
+      }
+    }),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
   }
diff --git a/webintroduce/package.json b/webintroduce/package.json
index ae00cef..75dc268 100644
--- a/webintroduce/package.json
+++ b/webintroduce/package.json
@@ -40,6 +40,7 @@
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
     "sass-loader": "^7.1.0",
+    "sass-resources-loader": "^2.0.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
diff --git a/webintroduce/src/assets/css/mixin.scss b/webintroduce/src/assets/css/mixin.scss
new file mode 100644
index 0000000..0518199
--- /dev/null
+++ b/webintroduce/src/assets/css/mixin.scss
@@ -0,0 +1,47 @@
+@import "./variables";
+//清楚浮动
+@mixin clearfix() {
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+//圆角边框
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -ms-border-radius: $radius;
+  border-radius: $radius;
+}
+
+// 透明度
+@mixin opacity($opacity) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -ms-border-radius: $radius;
+  border-radius: $radius;
+}
+
+//文字溢出省略显示
+@mixin text-ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+//盒模型阴影
+@mixin shadow($x, $y, $blur, $color) {
+  -webkit-box-shadow: $x $y $blur $color;
+  -moz-box-shadow: $x $y $blur $color;
+  box-shadow: $x $y $blur $color;
+}
+
+
+
+
+
diff --git a/webintroduce/src/assets/css/variables.scss b/webintroduce/src/assets/css/variables.scss
new file mode 100644
index 0000000..9068b8b
--- /dev/null
+++ b/webintroduce/src/assets/css/variables.scss
@@ -0,0 +1,3 @@
+$baseColor:#000;
+
+$baseBgColor:#000;
diff --git a/webintroduce/src/views/VHome.vue b/webintroduce/src/views/VHome.vue
index 173f3ae..ac0e1e1 100644
--- a/webintroduce/src/views/VHome.vue
+++ b/webintroduce/src/views/VHome.vue
@@ -30,4 +30,9 @@ export default {
 
 <style scoped lang="scss">
 
+  ul li{
+    @include  border-radius(100%);
+    background-color: #00ffff;
+    color: $baseColor;
+  }
 </style>