diff --git a/package.json b/package.json
index 448d1ec3aab..26247e374ba 100644
--- a/package.json
+++ b/package.json
@@ -92,9 +92,9 @@
     "husky": "1.3.1",
     "lint-staged": "8.1.5",
     "mockjs": "1.0.1-beta3",
-    "node-sass": "^4.9.0",
     "plop": "2.3.0",
     "runjs": "^4.3.2",
+    "sass": "^1.26.2",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "serve-static": "^1.13.2",
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index af047168e9f..6026ebb416c 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/Tinymce/components/EditorImage.vue b/src/components/Tinymce/components/EditorImage.vue
index d4a98e847d3..07d48e6cfda 100644
--- a/src/components/Tinymce/components/EditorImage.vue
+++ b/src/components/Tinymce/components/EditorImage.vue
@@ -104,7 +104,7 @@ export default {
 <style lang="scss" scoped>
 .editor-slide-upload {
   margin-bottom: 20px;
-  /deep/ .el-upload--picture-card {
+  ::v-deep .el-upload--picture-card {
     width: 100%;
   }
 }
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 0ec76e72f45..0d5ac5a1fed 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/admin/components/BoxCard.vue b/src/views/dashboard/admin/components/BoxCard.vue
index dff8462ac50..4bd0532dd95 100644
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/src/views/dashboard/admin/components/BoxCard.vue
@@ -101,7 +101,7 @@ export default {
     background-color: #fff;
     margin: auto;
     box-shadow: none!important;
-    /deep/ .pan-info {
+    ::v-deep .pan-info {
       box-shadow: none!important;
     }
   }
diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue
index 8aa973393a1..157497b244e 100644
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -277,7 +277,7 @@ export default {
   }
 }
 
-.article-textarea /deep/ {
+.article-textarea ::v-deep {
   textarea {
     padding-right: 40px;
     resize: none;
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index 85478895d64..4a497928f1b 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -91,7 +91,7 @@ export default {
 
 <style lang="scss" scoped>
 .app-container {
-  /deep/ .permission-alert {
+  ::v-deep .permission-alert {
     width: 320px;
     margin-top: 15px;
     background-color: #f0f9eb;
@@ -100,10 +100,10 @@ export default {
     border-radius: 4px;
     display: inline-block;
   }
-  /deep/ .permission-sourceCode {
+  ::v-deep .permission-sourceCode {
     margin-left: 15px;
   }
-  /deep/ .permission-tag {
+  ::v-deep .permission-tag {
     background-color: #ecf5ff;
   }
 }