feat(ui): move to sass node package

ui/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-    presets: ["@vue/app"]
+    presets: ["@vue/cli-plugin-babel/preset"]
 };

ui/package.json

@@ -65,23 +65,23 @@
     "eslint-plugin-jest": "^26.0.0",
     "eslint-plugin-vue": "^8.4.1",
     "jest-transform-stub": "^2.0.0",
-    "monaco-editor-webpack-plugin": "^5.0.0",
     "monaco-editor": "^0.29.1",
-    "node-sass": "^5.0.0",
+    "monaco-editor-webpack-plugin": "^5.0.0",
+    "sass": "^1.49.7",
     "sass-loader": "^10.1.1",
     "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.14"
   },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
   "babel": {
     "presets": [
       "@babel/preset-env"
     ]
   },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions"

ui/src/components/executions/Gantt.vue

@@ -338,7 +338,7 @@ table {
     }
 }
 
-/deep/ .log-wrapper .attempt-wrapper {
+::v-deep .log-wrapper .attempt-wrapper {
     margin-bottom: 0;
 }
 

ui/src/components/executions/Metrics.vue

@@ -97,7 +97,7 @@
 </script>
 
 <style scoped lang="scss">
-/deep/ thead tr:not(.top) {
+::v-deep thead tr:not(.top) {
     display: none;
 }
 

ui/src/components/executions/Overview.vue

@@ -151,7 +151,7 @@
     };
 </script>
 <style scoped lang="scss">
-/deep/ thead {
+::v-deep thead {
     display: none;
 }
 

ui/src/components/executions/Vars.vue

@@ -100,15 +100,15 @@
 </script>
 
 <style scoped lang="scss">
-/deep/ thead tr:not(.top) {
+::v-deep thead tr:not(.top) {
     display: none;
 }
 
-/deep/ td.key {
+::v-deep td.key {
     width: 150px;
 }
 
-/deep/ .b-table-stacked {
+::v-deep .b-table-stacked {
     td.key {
         width: 100%;
     }

ui/src/components/inputs/Editor.vue

@@ -271,7 +271,7 @@
 <style scoped lang="scss">
 @import "../../styles/variable";
 
-/deep/ .editor-container {
+::v-deep .editor-container {
     position: relative;
     max-width: 100%;
     display: flex;

ui/src/components/layout/DataTable.vue

@@ -59,11 +59,11 @@ small {
 }
 
 
-/deep/ th {
+::v-deep th {
     white-space: nowrap;
 }
 
-/deep/ .badge {
+::v-deep .badge {
     font-size: 100%;
     margin-right: $spacer/4;
     margin-bottom: $spacer/4;

ui/src/components/layout/DateRange.vue

@@ -165,12 +165,12 @@
     margin-left: 10px;
     margin-right: 10px;
 }
-/deep/ .mx-datepicker {
+::v-deep .mx-datepicker {
     margin-right: 5px;
 
 }
 
-/deep/ .mx-datepicker-popup {
+::v-deep .mx-datepicker-popup {
     height: 272px;
 
     .mx-datepicker-sidebar {

ui/src/components/layout/Duration.vue

@@ -90,7 +90,7 @@
 
 <style lang="scss" scoped>
 .duration-tt {
-    /deep/ .tooltip-inner {
+    ::v-deep .tooltip-inner {
         text-align: left;
         white-space: nowrap;
         max-width: none;

ui/src/components/layout/Pagination.vue

@@ -74,7 +74,7 @@ select {
     width: auto;
 }
 
-/deep/ .text-total {
+::v-deep .text-total {
     color: $pagination-color !important;
     font-weight: normal;
 }

ui/src/override/components/Menu.vue

@@ -226,15 +226,15 @@
         }
     }
 
-    /deep/ a.vsm--link_active[href="#"] {
+    ::v-deep a.vsm--link_active[href="#"] {
         cursor: initial !important;
     }
 
-    /deep/ .vsm--item {
+    ::v-deep .vsm--item {
         transition: opacity 0.2s;
     }
 
-    /deep/ .menu-icon {
+    ::v-deep .menu-icon {
         font-size: 1.5em;
         background-color: transparent !important;
         padding-bottom: 15px;