diff --git a/package.json b/package.json
index cf8b78b4c..b79007184 100644
--- a/package.json
+++ b/package.json
@@ -82,8 +82,8 @@
     "less-loader": "^5.0.0",
     "lint-staged": "^10.1.2",
     "mockjs": "1.0.1-beta3",
-    "node-sass": "^4.9.0",
     "runjs": "^4.3.2",
+    "sass": "^1.26.10",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
diff --git a/src/components/AssetSelect/index.vue b/src/components/AssetSelect/index.vue
index 28f3f07e8..af379e4c4 100644
--- a/src/components/AssetSelect/index.vue
+++ b/src/components/AssetSelect/index.vue
@@ -156,20 +156,20 @@ export default {
   .el-select{
     width: 100%;
   }
-  .page /deep/ .page-heading{
+  .page  ::v-deep  .page-heading{
     display: none;
   }
-  .el-dialog__wrapper /deep/.el-dialog__body{
+  .el-dialog__wrapper  ::v-deep .el-dialog__body{
     padding: 5px 10px;
   }
-  .page /deep/ .treebox{
+  .page  ::v-deep  .treebox{
     height: inherit !important;
   }
   .asset-select-dialog >>> .transition-box:first-child {
     background-color: #f3f3f3 ;
   }
 
-  .el-dialog__wrapper /deep/.el-dialog__body .wrapper-content {
+  .el-dialog__wrapper  ::v-deep .el-dialog__body .wrapper-content {
     padding: 10px;
   }
 
diff --git a/src/components/DataForm/index.vue b/src/components/DataForm/index.vue
index 4f8d7f32a..34d02175b 100644
--- a/src/components/DataForm/index.vue
+++ b/src/components/DataForm/index.vue
@@ -88,27 +88,27 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .el-form /deep/ .el-form-item {
+  .el-form  ::v-deep  .el-form-item {
     margin-bottom: 12px;
   }
 
-  .el-form /deep/ .el-form-item__content {
+  .el-form  ::v-deep  .el-form-item__content {
     width: 75%;
   }
 
-  .el-form /deep/ .el-form-item__label {
+  .el-form  ::v-deep  .el-form-item__label {
     padding: 0 30px 0 0;
   }
 
-  .el-form /deep/ .el-form-item__error {
+  .el-form  ::v-deep  .el-form-item__error {
      position: inherit;
   }
 
-  .el-form /deep/ .form-group-header {
+  .el-form  ::v-deep  .form-group-header {
     margin-left: 50px;
   }
 
-  .el-form /deep/ .help-block {
+  .el-form  ::v-deep  .help-block {
     display: block;
     margin-top: 5px;
     margin-bottom: 10px;
@@ -116,7 +116,7 @@ export default {
     font-size: 12px;
     line-height: 18px;
   }
-  .el-form /deep/ .help-block a {
+  .el-form  ::v-deep  .help-block a {
     color: #1c84c6;
   }
 </style>
diff --git a/src/components/DataTable/compenents/el-data-table/index.less b/src/components/DataTable/compenents/el-data-table/index.less
index 9af55063b..2a8c8a98f 100644
--- a/src/components/DataTable/compenents/el-data-table/index.less
+++ b/src/components/DataTable/compenents/el-data-table/index.less
@@ -1,16 +1,16 @@
-.el-data-table /deep/ .el-pagination{
+.el-data-table  ::v-deep  .el-pagination{
     text-align: center !important;
   }
-  .el-data-table /deep/ .el-table td{
+  .el-data-table  ::v-deep  .el-table td{
     padding: 4px 0;
   }
-  .el-data-table /deep/ .el-table th{
+  .el-data-table  ::v-deep  .el-table th{
     padding: 4px 0;
   }
-  .el-data-table/deep/ .el-form-item{
+  .el-data-table ::v-deep  .el-form-item{
     margin-bottom:10px !important ;
     margin-top:10px;
   }
-  .el-data-table/deep/ .el-pagination{
+  .el-data-table ::v-deep  .el-pagination{
     padding:15px  0 !important ;
-  }
\ No newline at end of file
+  }
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index 1edfdda68..8a69b4d9a 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -138,16 +138,16 @@ export default {
 
 <style lang="less" scoped>
 
-  .el-table /deep/ .el-table__row > td {
+  .el-table  ::v-deep  .el-table__row > td {
     line-height: 1.5;
     padding: 8px 0;
   }
-  .el-table /deep/ .el-table__row > td> div > span {
+  .el-table  ::v-deep  .el-table__row > td> div > span {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
   }
-  .el-table /deep/ .el-table__header > thead > tr >th {
+  .el-table  ::v-deep  .el-table__header > thead > tr >th {
     padding: 8px 0;
     background-color: #F5F5F6;
     font-size: 13px;
@@ -158,11 +158,11 @@ export default {
   }
 
   //分页
-  .el-pagination /deep/ .el-pagination__total{
+  .el-pagination  ::v-deep  .el-pagination__total{
     float: left;
   }
 
-  .el-pagination /deep/ .el-pagination__sizes{
+  .el-pagination  ::v-deep  .el-pagination__sizes{
     float: left;
   }
   //修改颜色
diff --git a/src/components/DataZTree/components/ZTree/index.vue b/src/components/DataZTree/components/ZTree/index.vue
index 4585da913..5f57303ec 100644
--- a/src/components/DataZTree/components/ZTree/index.vue
+++ b/src/components/DataZTree/components/ZTree/index.vue
@@ -158,7 +158,7 @@ export default {
     top: 100%;
     z-index: 1000;
   }
-  .ztree /deep/ .fa-refresh {
+  .ztree  ::v-deep  .fa-refresh {
     font: normal normal normal 14px/1 FontAwesome !important;
   }
   .dropdown a:hover {
diff --git a/src/components/DatetimeRangePicker/index.vue b/src/components/DatetimeRangePicker/index.vue
index 51d8996bf..c5fb0e4f2 100644
--- a/src/components/DatetimeRangePicker/index.vue
+++ b/src/components/DatetimeRangePicker/index.vue
@@ -100,10 +100,10 @@ export default {
     border-radius: 3px;
     height: 36px;
   }
-  /*.el-date-editor /deep/ .el-input__icon{*/
+  /*.el-date-editor  ::v-deep  .el-input__icon{*/
   /*  line-height: 28px;*/
   /*}*/
-  .el-date-editor /deep/ .el-range-separator{
+  .el-date-editor  ::v-deep  .el-range-separator{
     line-height: 28px;
   }
 </style>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 93f1f04ff..855395196 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -77,7 +77,7 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
-  /deep/ {
+   ::v-deep  {
     .el-scrollbar__bar {
       bottom: 0px;
     }
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 01988ec24..e29d088b5 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -84,7 +84,7 @@ li.is-active {
 //  line-height: 30px !important;
 //}
 ////重置字体大小 菜单宽度
-//.el-submenu /deep/ .el-submenu__title, .submenu-title-noDropdown{
+//.el-submenu  ::v-deep  .el-submenu__title, .submenu-title-noDropdown{
 //  height: 46px !important;
 //  line-height: 46px !important;
 //}
diff --git a/src/views/assets/Asset/components/Protocols/index.vue b/src/views/assets/Asset/components/Protocols/index.vue
index e601941a4..084de434b 100644
--- a/src/views/assets/Asset/components/Protocols/index.vue
+++ b/src/views/assets/Asset/components/Protocols/index.vue
@@ -150,14 +150,14 @@ export default {
     background-color: #fff;
   }
 
-  .el-select /deep/ .el-input__inner {
+  .el-select  ::v-deep  .el-input__inner {
     width: 100px;
   }
 
   .input-button {
     margin-top: 4px;
   }
-  .input-button /deep/ .el-button.el-button--mini {
+  .input-button  ::v-deep  .el-button.el-button--mini {
     height: 25px;
     padding: 5px;
   }
diff --git a/src/views/ops/CommandExecution.vue b/src/views/ops/CommandExecution.vue
index 8d92d6bff..55be85228 100644
--- a/src/views/ops/CommandExecution.vue
+++ b/src/views/ops/CommandExecution.vue
@@ -266,7 +266,7 @@ export default {
     overflow: auto;
     /*border-right: solid 1px red;*/
   }
-  .vue-codemirror-wrap /deep/ .CodeMirror{
+  .vue-codemirror-wrap  ::v-deep  .CodeMirror{
     width: 600px;
     height: 100px;
     border: 1px solid #eee;