diff --git a/package.json b/package.json
index 476067d..22d344c 100644
--- a/package.json
+++ b/package.json
@@ -92,10 +92,10 @@
     "http-proxy-middleware": "^0.19.1",
     "husky": "1.3.1",
     "lint-staged": "8.1.5",
-    "node-sass": "^4.9.0",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
     "plop": "2.3.0",
     "runjs": "^4.3.2",
-    "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
     "serve-static": "^1.13.2",
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index be9b177..6f75c0e 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -159,7 +159,7 @@ export default {
     display: inline-block;
     vertical-align: middle;
 
-    /deep/ .el-input__inner {
+    ::v-deep .el-input__inner {
       border-radius: 0;
       border: 0;
       padding-left: 0;
diff --git a/src/components/editorMaterial/index.vue b/src/components/editorMaterial/index.vue
index 666b6b5..e83cf30 100644
--- a/src/components/editorMaterial/index.vue
+++ b/src/components/editorMaterial/index.vue
@@ -476,7 +476,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  /deep/ .el-icon-circle-close{
+  ::v-deep .el-icon-circle-close{
     color: red;
   }
   .material-name{
diff --git a/src/components/material/index.vue b/src/components/material/index.vue
index bb872d8..cba9caf 100644
--- a/src/components/material/index.vue
+++ b/src/components/material/index.vue
@@ -468,7 +468,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  /deep/ .el-icon-circle-close{
+  ::v-deep .el-icon-circle-close{
     color: red;
   }
   .material-name{
diff --git a/src/components/singlematerial/index.vue b/src/components/singlematerial/index.vue
index 1dfa7bb..89e0fac 100644
--- a/src/components/singlematerial/index.vue
+++ b/src/components/singlematerial/index.vue
@@ -464,7 +464,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  /deep/ .el-icon-circle-close{
+  ::v-deep .el-icon-circle-close{
     color: red;
   }
   .material-name{
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 0ec76e7..0d5ac5a 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -73,7 +73,7 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
-  /deep/ {
+  ::v-deep {
     .el-scrollbar__bar {
       bottom: 0px;
     }
diff --git a/src/views/dashboard/OrderCount.vue b/src/views/dashboard/OrderCount.vue
index e3f62f1..e6938ad 100644
--- a/src/views/dashboard/OrderCount.vue
+++ b/src/views/dashboard/OrderCount.vue
@@ -91,14 +91,14 @@ export default {
 
 <style lang="scss" scoped>
   .acea-row{
-    /deep/.el-avatar--small {
+    ::v-deep.el-avatar--small {
       width: 22px;
       height: 22px;
       line-height: 22px;
     }
   }
   .checkTime{
-    /deep/.el-radio__input{
+    ::v-deep.el-radio__input{
       display: none;
     }
   }
@@ -110,7 +110,7 @@ export default {
     // padding: 0 20px !important;
   }
   .dashboard-console-visit {
-    /deep/.el-card__header{
+    ::v-deep.el-card__header{
       padding: 14px 20px !important;
     }
     ul {
diff --git a/src/views/dashboard/PanelGroup.vue b/src/views/dashboard/PanelGroup.vue
index d18a188..50f16df 100644
--- a/src/views/dashboard/PanelGroup.vue
+++ b/src/views/dashboard/PanelGroup.vue
@@ -204,7 +204,7 @@ export default {
   }
 }
 .baseInfo {
-  /deep/ .el-card__header {
+  ::v-deep .el-card__header {
     padding: 15px 20px !important;
   }
 }
diff --git a/src/views/generator/config.vue b/src/views/generator/config.vue
index 7004f57..cc8ba25 100644
--- a/src/views/generator/config.vue
+++ b/src/views/generator/config.vue
@@ -324,7 +324,7 @@ export default {
 </style>
 
 <style scoped>
-  /deep/ .input-with-select .el-input-group__prepend {
+  ::v-deep .input-with-select .el-input-group__prepend {
     background-color: #fff;
   }
 </style>
diff --git a/src/views/home.vue b/src/views/home.vue
index a69c928..a783fc4 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -104,14 +104,14 @@ export default {
 }
 
 .acea-row {
-  /deep/.el-avatar--small {
+  ::v-deep.el-avatar--small {
     width: 22px;
     height: 22px;
     line-height: 22px;
   }
 }
 .checkTime {
-  /deep/.el-radio__input {
+  ::v-deep.el-radio__input {
     display: none;
   }
 }
@@ -123,7 +123,7 @@ export default {
   // padding: 0 20px !important;
 }
 .dashboard-console-visit {
-  /deep/.el-card__header {
+  ::v-deep.el-card__header {
     padding: 14px 20px !important;
   }
   ul {
diff --git a/src/views/monitor/log/errorLog.vue b/src/views/monitor/log/errorLog.vue
index 630b770..ed26c02 100644
--- a/src/views/monitor/log/errorLog.vue
+++ b/src/views/monitor/log/errorLog.vue
@@ -127,7 +127,7 @@ export default {
 .demo-table-expand .el-form-item__content {
   font-size: 12px;
 }
-/deep/ .el-dialog__body {
+::v-deep .el-dialog__body {
   padding: 0 20px 10px 20px !important;
 }
 .java.hljs {
diff --git a/src/views/system/dict/dictDetail.vue b/src/views/system/dict/dictDetail.vue
index 31e7d61..386b9eb 100644
--- a/src/views/system/dict/dictDetail.vue
+++ b/src/views/system/dict/dictDetail.vue
@@ -104,7 +104,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  /deep/ .el-input-number .el-input__inner {
+  ::v-deep .el-input-number .el-input__inner {
     text-align: left;
   }
 </style>
diff --git a/src/views/system/job/index.vue b/src/views/system/job/index.vue
index d06e352..6696ea6 100644
--- a/src/views/system/job/index.vue
+++ b/src/views/system/job/index.vue
@@ -112,7 +112,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  /deep/ .el-input-number .el-input__inner {
+  ::v-deep .el-input-number .el-input__inner {
     text-align: left;
   }
 </style>
diff --git a/src/views/system/job/module/form.vue b/src/views/system/job/module/form.vue
index ce4bbcc..2e88576 100644
--- a/src/views/system/job/module/form.vue
+++ b/src/views/system/job/module/form.vue
@@ -143,7 +143,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  /deep/ .el-input-number .el-input__inner {
+  ::v-deep .el-input-number .el-input__inner {
     text-align: left;
   }
 </style>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 1e49755..df02319 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -199,7 +199,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  /deep/ .el-input-number .el-input__inner {
+  ::v-deep .el-input-number .el-input__inner {
     text-align: left;
   }
 </style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 5d1569b..b8d7c1c 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -304,7 +304,7 @@ export default {
 </style>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  /deep/ .el-input-number .el-input__inner {
+  ::v-deep .el-input-number .el-input__inner {
     text-align: left;
   }
 </style>
diff --git a/src/views/system/timing/log.vue b/src/views/system/timing/log.vue
index d9194dd..b81bf1f 100644
--- a/src/views/system/timing/log.vue
+++ b/src/views/system/timing/log.vue
@@ -110,7 +110,7 @@ export default {
     color: #444;
     background: #ffffff !important;
   }
-  /deep/ .el-dialog__body{
+  ::v-deep .el-dialog__body{
     padding: 0 20px 10px 20px !important;
   }
 </style>
diff --git a/src/views/tools/email/send.vue b/src/views/tools/email/send.vue
index 1aed640..4690100 100644
--- a/src/views/tools/email/send.vue
+++ b/src/views/tools/email/send.vue
@@ -136,7 +136,7 @@ export default {
     margin: 20px;
     width: 730px;
   }
-  /deep/ .w-e-text-container {
+  ::v-deep .w-e-text-container {
     height: 360px !important;
   }
 </style>
diff --git a/src/views/tools/storage/local/index.vue b/src/views/tools/storage/local/index.vue
index 0543225..55de0eb 100644
--- a/src/views/tools/storage/local/index.vue
+++ b/src/views/tools/storage/local/index.vue
@@ -187,10 +187,10 @@ export default {
 </script>
 
 <style scoped>
-  /deep/ .el-image__error, .el-image__placeholder{
+  ::v-deep .el-image__error, .el-image__placeholder{
     background: none;
   }
-  /deep/ .el-image-viewer__wrapper{
+  ::v-deep .el-image-viewer__wrapper{
     top: 55px;
   }
 </style>