diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 03ae517775..cf207da455 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -22,4 +22,4 @@ repos:
           description: This hook handles all frontend linting for Kolibri Studio
           entry: yarn run lint-frontend:format
           language: system
-          files: \.(js|vue|scss|less|css)$
+          files: \.(js|vue|scss|css)$
diff --git a/.stylelintrc.js b/.stylelintrc.js
index 6ac1911a5a..88bbd1b144 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -8,8 +8,14 @@ module.exports = {
      * Inline comments explain why rule is ignored
      */
     'selector-max-id': null, // This would require a major refactor
-    'at-rule-no-unknown': null, // we're using LESS
-    'scss/at-rule-no-unknown': null, // we're using LESS
-    'csstree/validator': null // this triggers issues with unknown at rules too.
+    'csstree/validator': null, // this triggers issues with unknown at rules too.
+    'selector-pseudo-element-no-unknown': [ 
+     true,
+     {
+         // In Vue 2.6 and later, `::v-deep` is used for deep selectors.  
+         // This rule allows `::v-deep` to prevent linting errors.
+         ignorePseudoElements: ['v-deep'],
+     }
+    ]
   },
 };
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
index e4e28d6d08..1f6e4b53d5 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
@@ -562,13 +562,13 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-text-field {
     margin-top: 8px !important;
   }
 
-  .policy-checkbox /deep/ .v-input__slot {
+  .policy-checkbox ::v-deep .v-input__slot {
     margin-bottom: 4px !important;
 
     label {
@@ -593,11 +593,11 @@
   .span-spacing {
     display: flex;
     margin-left: 40px;
-  }
 
-  .span-spacing span {
-    margin-left: 2px;
-    font-size: 16px;
+    span {
+      margin-left: 2px;
+      font-size: 16px;
+    }
   }
 
   .span-spacing-email {
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
index 6f305885e3..bfcafae57e 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
@@ -206,7 +206,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .main {
     overflow: auto;
@@ -214,12 +214,16 @@
     background-color: var(--v-backgroundColor-base);
   }
 
-  .links span:not(:last-child)::after {
-    margin: 0 8px 0 12px;
-    font-size: 14pt;
-    color: var(--v-grey-base);
-    vertical-align: middle;
-    content: '•';
+  .links {
+    span {
+      &:not(:last-child)::after {
+        margin: 0 8px 0 12px;
+        font-size: 14pt;
+        color: var(--v-grey-base);
+        vertical-align: middle;
+        content: '•';
+      }
+    }
   }
 
   .w-100 {
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
index afb06cdaca..a03aa51146 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
@@ -68,7 +68,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .w-100 {
     width: 100%;
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
index 7349cf97ff..de49330d84 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -69,7 +69,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .w-100 {
     width: 100%;
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
index 65e69270c9..ebd60495b8 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
@@ -93,7 +93,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .w-100 {
     width: 100%;
diff --git a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
index c3cba7907a..59785dd642 100644
--- a/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
+++ b/contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue
@@ -55,8 +55,7 @@
 
 </script>
 
-
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   div {
     white-space: nowrap;
@@ -68,9 +67,4 @@
     text-overflow: ellipsis;
   }
 
-  .VBtn:hover::before,
-  .VBtn:focus::before {
-    background-color: transparent;
-  }
-
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue b/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue
index ca87915d68..ee5023d180 100644
--- a/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue
+++ b/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue
@@ -62,5 +62,5 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
index 7a871a42a5..ea030b9d5d 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
@@ -225,5 +225,5 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
index 433ede42c3..242baecb8d 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
@@ -248,9 +248,9 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-chip__close {
+  ::v-deep .v-chip__close {
     padding-top: 4px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
index 3331542803..2f6967c644 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
@@ -168,5 +168,5 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
index fbe0c4bf46..0cfe28208f 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserDetails.vue
@@ -400,7 +400,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .user-table {
     max-width: 1024px;
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
index ade5ba7dc4..cfb9865eb4 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
@@ -219,6 +219,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
index ed87cb859a..cf1a82e6ce 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
@@ -236,12 +236,12 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .list-item-disabled {
     opacity: 0.5;
 
-    /deep/ .v-list__tile--link:hover {
+    ::v-deep .v-list__tile--link:hover {
       color: inherit;
       background-color: transparent;
     }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index aa66b9d5fd..1cba5ad790 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -425,10 +425,10 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @exercise-answer-correct: #4caf50;
-  @exercise-answer-wrong: #ef5350;
+  $exercise-answer-correct: #4caf50;
+  $exercise-answer-wrong: #ef5350;
 
   .card-border-light {
     /* stylelint-disable-next-line custom-property-pattern */
@@ -448,11 +448,11 @@
     }
 
     &.closed.answer-correct:hover {
-      background-color: fade(@exercise-answer-correct, 15%);
+      background-color: rgba($exercise-answer-correct, 0.15);
     }
 
     &.closed.answer-wrong:hover {
-      background-color: fade(@exercise-answer-wrong, 15%);
+      background-color: rgba($exercise-answer-wrong, 0.15);
     }
 
     .indicator {
@@ -461,11 +461,11 @@
       height: 100%;
 
       &.correct {
-        background-color: @exercise-answer-correct;
+        background-color: $exercise-answer-correct;
       }
 
       &.wrong {
-        background-color: @exercise-answer-wrong;
+        background-color: $exercise-answer-wrong;
       }
     }
   }
@@ -475,8 +475,8 @@
   }
 
   /* Remove the underline on text fields that are not focused */
-  /deep/.no-border.v-text-field > .v-input__control > .v-input__slot::before,
-  /deep/.no-border.v-text-field > .v-input__control > .v-input__slot::after {
+  ::v-deep .no-border.v-text-field > .v-input__control > .v-input__slot::before,
+  ::v-deep .no-border.v-text-field > .v-input__control > .v-input__slot::after {
     border-style: none;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
index 340cca0152..c1cbf4dbea 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
@@ -453,7 +453,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .item {
     position: relative;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index e9a791369f..aa318fa11c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -420,7 +420,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .question-text {
     transition: 0.7s;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
index e6ed9d2fa9..d9c26524d5 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
@@ -223,7 +223,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .hints-toggle {
     cursor: pointer;
@@ -247,7 +247,7 @@
     /*! rtl:end:ignore */
   }
 
-  /deep/ .v-input--selection-controls {
+  ::v-deep .v-input--selection-controls {
     margin-top: 0;
 
     .accent--text {
@@ -259,7 +259,7 @@
     }
   }
 
-  /deep/ img {
+  ::v-deep img {
     max-width: 100%;
     height: auto;
   }
@@ -268,7 +268,7 @@
     padding: 11px;
   }
 
-  .item-answers-preview /deep/ .checkbox-icon {
+  .item-answers-preview ::v-deep .checkbox-icon {
     top: 8px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
index 357ac2737f..3996b6cb66 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
@@ -316,7 +316,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .toolbar-item {
     max-width: 50px;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue
index 44e77ed44b..189ad3c4ab 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue
@@ -108,7 +108,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .channel-item {
     background: #ffffff;
@@ -119,12 +119,12 @@
   .channel-tile,
   .v-list__tile__title,
   .v-list__tile__title > h4,
-  /deep/ .channel-tile > .v-list__tile {
+  ::v-deep .channel-tile > .v-list__tile {
     width: 100%;
     max-width: 100%;
   }
 
-  /deep/ .channel-tile > .v-list__tile {
+  ::v-deep .channel-tile > .v-list__tile {
     padding-right: 0;
   }
 
@@ -137,12 +137,13 @@
   }
 
   .text-truncate {
-    /* fix clipping of dangling characters */
+    // Fix clipping of dangling characters
     line-height: 1.3 !important;
   }
 
-  /deep/ .selectedIndeterminate svg {
+  ::v-deep .selectedIndeterminate svg {
     fill: gray !important;
   }
 
 </style>
+
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
index f0795c04dc..77ba98f670 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue
@@ -244,7 +244,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .content-item,
   .v-list__tile {
@@ -271,11 +271,11 @@
   }
 
   .content-item:hover,
-  /deep/ .content-item > .v-list__tile:hover {
+  ::v-deep .content-item > .v-list__tile:hover {
     background: #eeeeee;
   }
 
-  /deep/ .action-col,
+  ::v-deep .action-col,
   .thumbnail-col {
     flex-shrink: 0;
     min-width: 24px;
@@ -290,21 +290,21 @@
     }
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     padding-left: 11px;
     cursor: pointer;
   }
 
-  /deep/ .v-list__tile__title {
+  ::v-deep .v-list__tile__title {
     height: auto;
   }
 
-  /deep/ .text-truncate {
+  ::v-deep .text-truncate {
     /* fix clipping of dangling characters */
     line-height: 1.3 !important;
   }
 
-  /deep/ .selectedIndeterminate svg {
+  ::v-deep .selectedIndeterminate svg {
     fill: gray !important;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
index 8ddcdc0a53..2b3150e283 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
@@ -419,14 +419,14 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .clipboard {
     position: absolute;
   }
 
   .container,
-  /deep/ .drawer-contents {
+  ::v-deep .drawer-contents {
     max-height: 100vh;
   }
 
@@ -454,7 +454,7 @@
     vertical-align: text-bottom;
   }
 
-  /deep/ .header .v-list__tile {
+  ::v-deep .header .v-list__tile {
     border-left: 5px solid transparent;
   }
 
@@ -474,15 +474,15 @@
     background-color: #f9f9f9;
   }
 
-  /deep/ .v-toolbar__content {
+  ::v-deep .v-toolbar__content {
     padding: 0;
   }
 
-  /deep/ .v-list__group--active::before {
+  ::v-deep .v-list__group--active::before {
     background: none !important;
   }
 
-  /deep/ .channel-item:last-child::after {
+  ::v-deep .channel-item:last-child::after {
     background: rgba(0, 0, 0, 0.12) !important;
   }
 
@@ -494,7 +494,7 @@
     left: 0;
     background-color: rgba(153, 97, 137, 0.2);
     /* stylelint-disable-next-line custom-property-pattern */
-    border: 5px solidvar(--v-draggabledropoverlay-base);
+    border: 5px solid var(--v-draggabledropoverlay-base);
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
index 1e4d0f3c7d..d47852d957 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -307,7 +307,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .content-node-edit-item {
     position: relative;
@@ -370,7 +370,7 @@
     cursor: grab;
   }
 
-  /deep/ .v-input--selection-controls__input {
+  ::v-deep .v-input--selection-controls__input {
     margin-right: 0;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index 55e0941d27..e7ca53c7ec 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -375,10 +375,10 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @thumbnail-width: 16%;
-  @compact-thumbnail-width: ~'20px + 0.5%';
+  $thumbnail-width: 16%;
+  $compact-thumbnail-width: calc(20px + 0.5%);
 
   .content-list-item {
     background: #ffffff;
@@ -427,7 +427,7 @@
     }
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     display: flex;
     flex: 1 1 auto;
     flex-wrap: nowrap;
@@ -463,25 +463,23 @@
 
   .thumbnail-col {
     flex-shrink: 0;
-    width: @thumbnail-width;
+    width: $thumbnail-width;
     min-width: 70px;
     max-width: 160px;
 
     .compact & {
-      // stylelint-disable
-      width: calc(@compact-thumbnail-width);
-      // stylelint-enable
+      width: $compact-thumbnail-width;
       min-width: 20px;
     }
   }
 
   .description-col {
     flex-shrink: 1 !important;
-    width: calc(100% - @thumbnail-width - 206px);
+    width: calc(100% - $thumbnail-width - 206px);
     word-break: break-word;
 
     .compact & {
-      width: calc(100% - @compact-thumbnail-width - 206px);
+      width: calc(100% - $compact-thumbnail-width - 206px);
     }
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
index 6decf999b1..1e3dba9add 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
@@ -295,7 +295,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .card-border-light {
     /* stylelint-disable-next-line custom-property-pattern */
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/NodeTreeNavigation.vue b/contentcuration/contentcuration/frontend/channelEdit/components/NodeTreeNavigation.vue
index 0d006b4382..70b9f56e59 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/NodeTreeNavigation.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/NodeTreeNavigation.vue
@@ -144,7 +144,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .breadcrumbs-item.primary--text {
     text-decoration: underline;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue b/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
index ec8217996d..a0d06b17a0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/RelatedResourcesTab/RelatedResourcesTab.vue
@@ -231,7 +231,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .title {
     display: inline-flex;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourceDrawer.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourceDrawer.vue
index 3b9acbfdbf..b2d6b7daee 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ResourceDrawer.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ResourceDrawer.vue
@@ -81,6 +81,6 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
index a90a5f878c..f045a48a74 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -412,9 +412,9 @@
 
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 
-  .v-badge /deep/ .v-badge__badge {
+  .v-badge ::v-deep .v-badge__badge {
     top: -5px;
     left: 10px;
   }
@@ -453,7 +453,7 @@
   }
 
   // size causes rows to shift
-  /deep/ .v-btn {
+  ::v-deep .v-btn {
     width: 24px;
     height: 24px;
     margin: 0;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 053a5fd70c..2bb801094f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -922,12 +922,10 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @space-between-sections: 64px;
-
-  /deep/ a,
-  /deep/ a:hover {
+  ::v-deep a,
+  ::v-deep a:hover {
     color: inherit;
     text-decoration: none;
   }
@@ -935,7 +933,7 @@
   .details-edit-view {
     padding: 10px;
 
-    /deep/ .subheading {
+    ::v-deep .subheading {
       margin-bottom: 8px;
       font-weight: bold;
     }
@@ -945,7 +943,7 @@
     }
 
     .auth-section {
-      /deep/ .v-autocomplete .v-input__append-inner {
+      ::v-deep .v-autocomplete .v-input__append-inner {
         visibility: hidden;
       }
     }
@@ -954,29 +952,29 @@
       max-width: 960px;
 
       .tagbox {
-        /deep/ .v-select__selections {
+        ::v-deep .v-select__selections {
           min-height: 0 !important;
         }
 
-        /deep/ .v-chip__content {
+        ::v-deep .v-chip__content {
           color: black; // Read-only tag box grays out tags
         }
 
-        /deep/ .v-input__append-inner {
+        ::v-deep .v-input__append-inner {
           display: none;
         }
       }
 
-      /deep/ .v-input--is-readonly {
-        /deep/ label {
+      ::v-deep .v-input--is-readonly {
+        ::v-deep label {
           color: var(--v-grey-darken2) !important;
         }
 
-        /deep/ .v-input__append-inner {
+        ::v-deep .v-input__append-inner {
           display: none;
         }
 
-        /deep/ .v-input__slot {
+        ::v-deep .v-input__slot {
           &::before {
             border-style: dotted;
           }
@@ -990,12 +988,12 @@
       .basicInfoColumn {
         display: flex;
 
-        /deep/ .v-input {
+        ::v-deep .v-input {
           // Stretches the "Description" text area to fill the column vertically
           align-items: stretch;
         }
 
-        /deep/ .v-input__control {
+        ::v-deep .v-input__control {
           // Makes sure that the character count does not get pushed to second column
           flex-wrap: nowrap;
         }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditList.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditList.vue
index a18b45000d..8b41200a3f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditList.vue
@@ -98,7 +98,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-divider {
     margin-top: 0;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
index 54de65d7ef..63670025ae 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
@@ -179,7 +179,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-list__tile__action {
     min-width: 30px;
@@ -194,7 +194,7 @@
     display: none;
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     height: max-content !important;
     min-height: 64px;
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
index 671647b90f..fca0812d32 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
@@ -643,9 +643,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-toolbar__extension {
+  ::v-deep .v-toolbar__extension {
     padding: 0;
 
     .v-toolbar__content {
@@ -661,7 +661,7 @@
     margin-left: 0;
   }
 
-  /deep/ .v-content__wrap {
+  ::v-deep .v-content__wrap {
     max-height: calc(100vh - 128px);
     overflow-y: auto;
   }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
index a4dce1e337..4a1866f769 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
@@ -335,7 +335,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .tabs {
     position: sticky;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/InheritAncestorMetadataModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/InheritAncestorMetadataModal.vue
index 333d3f0eab..8545d9a9ea 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/InheritAncestorMetadataModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/InheritAncestorMetadataModal.vue
@@ -321,7 +321,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .divider {
     margin: 16px 0;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
index 0638969eda..f091276838 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
@@ -103,6 +103,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
index 5865f28d30..31c188b442 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
@@ -347,14 +347,14 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-toolbar__extension {
+  ::v-deep .v-toolbar__extension {
     padding: 0;
   }
 
   .content-card {
-    /deep/ .v-list__tile {
+    ::v-deep .v-list__tile {
       height: unset;
     }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue
index cf701fd03d..3879541975 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue
@@ -83,5 +83,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue
index b8c7565dcc..cc7272e375 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/DiffTable.vue
@@ -147,10 +147,10 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ th,
-  td {
+  ::v-deep th,
+  ::v-deep td {
     padding: 0 12px !important;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
index 5b58af9e62..e81e5e70d6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
@@ -571,7 +571,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .main-content {
     height: calc(100vh - 176px);
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditAppError.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditAppError.vue
index bfe5e490ca..b8515d7901 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditAppError.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditAppError.vue
@@ -85,4 +85,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
index d5c1105995..4e55199191 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
@@ -193,7 +193,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .thumbnail-column {
     flex-basis: 33%;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue
index 4eceb4c85f..c87b4e32d3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue
@@ -85,7 +85,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .show-more-btn {
     margin-left: -7px;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue
index e0fefabf13..871b73bbfd 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentNodeChip.vue
@@ -48,4 +48,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
index e085b6fe7d..cf44d06f05 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ImportFromChannelsModal.vue
@@ -274,7 +274,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .modal-container.fluid {
     max-width: 1200px;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ReviewSelectionsPage.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ReviewSelectionsPage.vue
index 17f6ab7242..69b1ca0423 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ReviewSelectionsPage.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ReviewSelectionsPage.vue
@@ -96,14 +96,14 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .over-app-bar {
     z-index: 3;
   }
 
   // Because the tiles don't re-adjust in responsive mode
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     height: auto;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
index fd4ef86a77..f0704ff9ef 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
@@ -168,7 +168,7 @@
 
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 
   .metadata {
     color: var(--v-grey-darken2);
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
index 128e990ecb..4190a07ca5 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchFilters.vue
@@ -229,7 +229,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .import-search-filters {
     z-index: 0;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
index c4637da638..784356a2f6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
@@ -231,13 +231,13 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-form {
     max-width: 900px;
   }
 
-  .searchtext /deep/ .v-input__append-outer {
+  .searchtext ::v-deep .v-input__append-outer {
     height: 57px;
     margin: 0;
     margin-top: 0 !important;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
index 1135991555..6a303cc17f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchResultsList.vue
@@ -239,4 +239,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue
index 814ae683d9..0c25fe1315 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue
@@ -202,7 +202,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .node-list {
     width: 100%;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 0f8ba07b3c..26d869ecc1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -535,7 +535,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-speed-dial {
     position: absolute;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
index 9d36a109aa..f0f54d8c8b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
@@ -402,18 +402,18 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-toolbar__extension {
+  ::v-deep .v-toolbar__extension {
     padding: 0;
   }
 
-  .tree-drawer /deep/ .drawer-contents {
+  .tree-drawer ::v-deep .drawer-contents {
     display: flex;
     flex-direction: column;
   }
 
-  .hierarchy-toggle /deep/ .v-icon {
+  .hierarchy-toggle ::v-deep .v-icon {
     transform: scaleX(-1);
 
     [dir='rtl'] & {
@@ -425,7 +425,7 @@
     transition: padding-left 0s !important;
   }
 
-  .hierarchy-toolbar /deep/ .v-toolbar__content {
+  .hierarchy-toolbar ::v-deep .v-toolbar__content {
     padding: 0 20px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
index 4df87388d5..b2378faee7 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
@@ -154,9 +154,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @max-height: calc(100vh - 96px);
+  $max-height: calc(100vh - 96px);
 
   .v-card,
   video,
@@ -174,11 +174,11 @@
   iframe,
   .epub {
     min-height: 200px;
-    max-height: @max-height;
+    max-height: $max-height;
   }
 
   video {
-    max-height: @max-height;
+    max-height: $max-height;
   }
 
   .message-card,
@@ -193,14 +193,14 @@
   }
 
   .fullscreen {
-    min-height: @max-height;
+    min-height: $max-height;
 
     .v-card,
     audio,
     embed,
     iframe,
     .epub {
-      min-height: @max-height;
+      min-height: $max-height;
     }
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FilePreview.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FilePreview.vue
index e1e07a0ef0..aebbcbe668 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FilePreview.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FilePreview.vue
@@ -174,7 +174,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .preview-area {
     outline: none;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
index 2902d99f56..b624eca24a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
@@ -179,7 +179,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .preview-wrapper {
     padding-right: 15px;
@@ -200,11 +200,11 @@
   .v-input--radio-group {
     width: 100%;
 
-    /deep/ .v-input__control {
+    ::v-deep .v-input__control {
       width: 100%;
     }
 
-    /deep/ label {
+    ::v-deep label {
       color: var(--v-text-base);
     }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadDefault.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadDefault.vue
index 211e2ea2c9..c53923a909 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadDefault.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadDefault.vue
@@ -87,9 +87,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-card {
+  ::v-deep .v-card {
     position: relative;
     min-height: 50vh;
     margin-top: 20px;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
index c83f68cd4f..7a77710e54 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
@@ -181,7 +181,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .layout .section-header {
     padding: 0 15px;
@@ -193,7 +193,7 @@
     margin: 0;
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     height: max-content !important;
     min-height: 64px;
     padding: 5px 16px;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
index c83c8c7f75..dd889cde2a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SubtitlesList.vue
@@ -67,9 +67,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  .subheading /deep/ .v-icon {
+  .subheading ::v-deep .v-icon {
     margin-left: 4px;
     vertical-align: text-top;
   }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue
index 1cf53fcc5b..38a354b68b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryItem.vue
@@ -134,7 +134,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-icon {
     font-size: 14pt;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
index d980e11f4b..aea0c424a2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/supplementaryLists/SupplementaryList.vue
@@ -151,9 +151,9 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .languageTile > .v-list__tile {
+  ::v-deep .languageTile > .v-list__tile {
     height: 56px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
index 2d073b294b..015b31c546 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
@@ -452,9 +452,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ canvas {
+  ::v-deep canvas {
     border: 2px solid var(--v-grey-darken2);
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/sync/SyncResourcesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/sync/SyncResourcesModal.vue
index b0f54ce329..c0902aad2f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/sync/SyncResourcesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/sync/SyncResourcesModal.vue
@@ -249,14 +249,14 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   // counteract the effect of the VCardText that is wrapping the VList component
-  .v-card /deep/ .v-card__text {
+  .v-card ::v-deep .v-card__text {
     padding: 0;
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     align-items: flex-start;
     height: unset;
     padding: 8px 0;
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/template/Template.vue b/contentcuration/contentcuration/frontend/channelEdit/views/template/Template.vue
index d46512bfa1..df42913b2b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/template/Template.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/template/Template.vue
@@ -23,6 +23,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index e1ba3e3625..ae03346c9d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -311,7 +311,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .show-more-button-container {
     display: flex;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue
index 6fb71d6b64..dc6bdbd80c 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue
@@ -115,7 +115,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   h3,
   p {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 7661f9a8cf..d72072836a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -215,13 +215,13 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-input--checkbox {
     margin: 0;
   }
 
-  /deep/ .v-messages {
+  ::v-deep .v-messages {
     display: none;
   }
 
@@ -238,7 +238,7 @@
     overflow: auto;
   }
 
-  /deep/ .v-label * {
+  ::v-deep .v-label * {
     vertical-align: bottom;
   }
 
@@ -247,4 +247,4 @@
     align-items: center;
   }
 
-</style>
+</style>
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 57a52467a8..d7e5120170 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -271,7 +271,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .list-wrapper {
     max-width: 1080px;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index ba98f77283..ae440d54ab 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -383,7 +383,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-card {
     width: 100%;
@@ -413,7 +413,7 @@
     }
   }
 
-  /deep/ .thumbnail {
+  ::v-deep .thumbnail {
     width: 100%;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
index b77bb06e79..0d7bf6dfa2 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
@@ -142,7 +142,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .add-channel-button {
     margin: 0;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
index affb0ba054..81afddd5c8 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
@@ -67,6 +67,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
index 47374365b9..3bb72c61c2 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
@@ -123,16 +123,15 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   // Need to set otherwise chips will exceed width of selection box
-
-  /deep/ .v-select__selections {
+  ::v-deep .v-select__selections {
     width: calc(100% - 48px);
   }
 
   .v-chip,
-  /deep/ .v-chip__content,
+  ::v-deep .v-chip__content,
   .text-truncate {
     max-width: 100%;
   }
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListAppError.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListAppError.vue
index 82cdb78d56..ecb93ef3be 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListAppError.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListAppError.vue
@@ -75,4 +75,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 4dee071859..af387cc79a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -267,7 +267,7 @@
 </script>
 
 
-<style lang="less">
+<style lang="scss">
 
   html {
     overflow-y: auto !important;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue
index 22a3eaeb57..f7ab82e8a0 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue
@@ -60,7 +60,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .card-header {
     font-size: 18px;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
index d6b5b39198..b360540c36 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
@@ -132,7 +132,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .add-channel-button {
     margin: 0;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
index 8ff3679eee..bc1e6d44ea 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
@@ -123,7 +123,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   td {
     font-size: 12pt !important;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue
index ea771b5241..66d6bf5c62 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue
@@ -140,13 +140,13 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .list-items {
     margin: 0 auto;
   }
 
-  /deep/ .v-datatable {
+  ::v-deep .v-datatable {
     background-color: transparent !important;
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index c5607ff011..c95a942855 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -421,6 +421,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue b/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
index d4a0552ddc..c6f9689857 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Storage/index.vue
@@ -139,7 +139,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   h2 {
     margin-top: 32px;
@@ -149,13 +149,13 @@
     padding: 16px 0;
   }
 
-  /deep/.ui-progress-linear {
+  ::v-deep .ui-progress-linear {
     max-width: 75%;
     height: 8px !important;
     margin: 8px 0;
     background: #e9e9e9;
 
-    /deep/.is-determinate {
+    ::v-deep .is-determinate {
       height: 8px !important;
     }
   }
diff --git a/contentcuration/contentcuration/frontend/shared/app.js b/contentcuration/contentcuration/frontend/shared/app.js
index d650a1d061..89c6467872 100644
--- a/contentcuration/contentcuration/frontend/shared/app.js
+++ b/contentcuration/contentcuration/frontend/shared/app.js
@@ -118,7 +118,7 @@ import { theme, icons } from 'shared/vuetify';
 import { i18nSetup } from 'shared/i18n';
 
 import './styles/vuetify.scss';
-import 'shared/styles/main.less';
+import 'shared/styles/main.scss';
 import Base from 'shared/Base.vue';
 import urls from 'shared/urls';
 import ActionLink from 'shared/views/ActionLink';
diff --git a/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue b/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
index 3146181606..602fafd661 100644
--- a/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
+++ b/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
@@ -60,7 +60,7 @@
 
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .back-text {
     display: inline-block;
diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.less b/contentcuration/contentcuration/frontend/shared/styles/main.scss
similarity index 100%
rename from contentcuration/contentcuration/frontend/shared/styles/main.less
rename to contentcuration/contentcuration/frontend/shared/styles/main.scss
diff --git a/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue b/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
index 16afe626db..0077f2dc97 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
@@ -60,7 +60,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-btn {
     min-width: min-content;
diff --git a/contentcuration/contentcuration/frontend/shared/views/Alert.vue b/contentcuration/contentcuration/frontend/shared/views/Alert.vue
index 2e3537a3e6..cc34bf43a3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Alert.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Alert.vue
@@ -86,9 +86,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ label {
+  ::v-deep label {
     margin: 0;
     font-weight: normal;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
index aa1f61432f..346d76ccb8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
@@ -212,7 +212,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-toolbar {
     z-index: 5;
@@ -222,7 +222,7 @@
     border-radius: 8px;
   }
 
-  /deep/ .v-tabs__div {
+  ::v-deep .v-tabs__div {
     min-width: 160px;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/Banner.vue b/contentcuration/contentcuration/frontend/shared/views/Banner.vue
index 62dcd05a84..f9a07af658 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Banner.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Banner.vue
@@ -63,7 +63,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-alert {
     border: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue b/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
index 03202e099e..339677df53 100644
--- a/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
@@ -18,7 +18,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .bottom-bar {
     position: fixed;
diff --git a/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue b/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue
index 0257d6561a..178ca0a5ac 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue
@@ -115,14 +115,14 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   /* Truncate text if the last item is too long */
   .breadcrumb:last-child {
     max-width: calc(100% - 86px);
   }
 
-  /deep/ .v-breadcrumbs__item {
+  ::v-deep .v-breadcrumbs__item {
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
index e21eb251c1..50eda18d2e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeIcon.vue
@@ -107,10 +107,10 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .iconOnly {
-    /deep/ .v-chip__content {
+    ::v-deep .v-chip__content {
       height: 22px;
       padding: 0 5px;
     }
diff --git a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
index 0248338ce4..59823f6efa 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ContentNodeLearningActivityIcon.vue
@@ -102,7 +102,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .chip {
     display: inline-block;
diff --git a/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue b/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue
index d4535ef5af..3fc7a93d73 100644
--- a/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/CopyToken.vue
@@ -76,13 +76,13 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  .v-text-field /deep/ input[type='text'] {
+  .v-text-field ::v-deep input[type='text'] {
     color: var(--v-grey-darken1) !important;
   }
 
-  .v-text-field /deep/ .v-input__slot::before {
+  .v-text-field ::v-deep .v-input__slot::before {
     border-style: dotted !important;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/ErrorList/ErrorList.vue b/contentcuration/contentcuration/frontend/shared/views/ErrorList/ErrorList.vue
index d0ac183f7c..4daa20612c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ErrorList/ErrorList.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ErrorList/ErrorList.vue
@@ -25,9 +25,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     padding-left: 0;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/ExpandableList.vue b/contentcuration/contentcuration/frontend/shared/views/ExpandableList.vue
index d35f824cce..39ba3f3c5b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ExpandableList.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ExpandableList.vue
@@ -138,12 +138,12 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-expansion-panel {
     box-shadow: none;
 
-    /deep/ .v-expansion-panel__header {
+    ::v-deep .v-expansion-panel__header {
       padding: 0;
     }
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/Formula.vue b/contentcuration/contentcuration/frontend/shared/views/Formula.vue
index fb8780ee42..769eb0a60f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Formula.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Formula.vue
@@ -66,7 +66,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .formula {
     font-family: Symbola;
diff --git a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
index dd1fc81be9..e1f1785ce2 100644
--- a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
@@ -120,13 +120,13 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-tabs__div {
+  ::v-deep .v-tabs__div {
     min-width: 160px;
   }
 
-  /deep/ .v-tabs__container {
+  ::v-deep .v-tabs__container {
     padding: 0;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
index f0710b7714..b883299226 100644
--- a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
@@ -39,9 +39,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/.k-tooltip {
+  ::v-deep .k-tooltip {
     width: 100%;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue b/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue
index e283a104af..cc6afb8c68 100644
--- a/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/InfoModal.vue
@@ -56,9 +56,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ p {
+  ::v-deep p {
     font-size: 12pt;
     line-height: normal;
     color: var(--v-grey-darken3);
diff --git a/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
index 57d69e0bea..a48811012a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
@@ -122,15 +122,15 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-select__selections {
+  ::v-deep .v-select__selections {
     width: calc(100% - 48px);
     min-height: 0 !important;
   }
 
   .v-chip,
-  /deep/ .v-chip__content,
+  ::v-deep .v-chip__content,
   .text-truncate {
     max-width: 100%;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue b/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
index 35cbead717..61b977d820 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LazyListGroup.vue
@@ -78,11 +78,11 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @icon-padding: 16px;
-  @icon-width: 25px;
-  @header-width: calc(2 * @icon-padding + @icon-width);
+  $icon-padding: 16px;
+  $icon-width: 25px;
+  $header-width: calc(2 * $icon-padding + $icon-width);
 
   .list-group {
     box-sizing: border-box;
@@ -108,9 +108,7 @@
   }
 
   .header-content.has-icon {
-    // stylelint-disable
-    width: calc(100% ~'-' @header-width);
-    // stylelint-enable
+    width: calc(100% - $header-width);
   }
 
   .list-group.open > .list-group-header .v-icon {
@@ -119,8 +117,8 @@
 
   .icon-container {
     box-sizing: border-box;
-    width: @icon-width;
-    padding: 0 @icon-padding;
+    width: $icon-width;
+    padding: 0 $icon-padding;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue b/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
index 070c1a22a0..eed885c30d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
@@ -35,7 +35,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .loading-text {
     top: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
index 5b6c6b2c53..14afcc519f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -210,6 +210,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue
index 9499dcd4e0..b7d86147ec 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/FormulasMenu/FormulasMenu.vue
@@ -179,7 +179,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .formulas-menu {
     position: relative;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
index 48e1324d46..6129831cb5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/ImagesMenu/ImagesMenu.vue
@@ -233,7 +233,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .images-menu {
     position: relative;
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue
index c8f671838f..171e2d94be 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue
@@ -853,7 +853,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   @import '../mathquill/mathquill.css';
 
@@ -882,7 +882,7 @@
   // TODO (when updating to new frontend files structure)
   // find better location for following styles that
   // are supposed to be common to all editable fields
-  /deep/ .mq-editable-field {
+  ::v-deep .mq-editable-field {
     border: 0;
 
     .mq-to,
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue
index 2769e88cd5..63b0b6470e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue
@@ -77,7 +77,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .markdown-viewer {
     max-width: calc(100% - 2em);
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
index bb0624fcec..a6f9e7021a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/MarkdownFormulaField.vue
@@ -13,7 +13,7 @@
 
   // vue-custom-element can't use SFC styles, so we load our styles directly,
   // to be passed in when we register this component as a custom element
-  import css from '!css-loader!less-loader!./style.less';
+  import css from '!css-loader!sass-loader!./style.scss';
 
   const MarkdownFormulaField = {
     name: 'MarkdownFormulaField',
@@ -58,8 +58,8 @@
 <style>
 /*
   Warning: custom elements don't currently have a way of using SFC styles.
-  Instead, add your style changes to `./style.less`
+  Instead, add your style changes to `./style.scss`
 
-  Additionally, all child component styles must be included in `./style.less`
+  Additionally, all child component styles must be included in `./style.scss`
 */
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.less b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
similarity index 100%
rename from contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.less
rename to contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.scss
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
index 096531cbe8..72e4c42296 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/MarkdownImageField.vue
@@ -64,7 +64,7 @@
 
   // vue-custom-element can't use SFC styles, so we load our styles directly,
   // to be passed in when we register this component as a custom element
-  import css from '!css-loader!less-loader!./style.less';
+  import css from '!css-loader!sass-loader!./style.scss';
 
   const MarkdownImageField = {
     name: 'MarkdownImageField',
@@ -197,8 +197,8 @@
 <style>
 /*
   Warning: custom elements don't currently have a way of using SFC styles.
-  Instead, add your style changes to `./style.less`
+  Instead, add your style changes to `./style.scss`
 
-  Additionally, all child component styles must be included in `./style.less`
+  Additionally, all child component styles must be included in `./style.scss`
 */
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.less b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
similarity index 84%
rename from contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.less
rename to contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
index 11392b3ec7..9cea4ca8c3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.less
+++ b/contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.scss
@@ -1,9 +1,7 @@
 @import '~vuetify/dist/vuetify.min.css';
 // stylelint-disable scss/at-import-partial-extension
-@import '~shared/styles/main.less';
-// stylelint-enable
 
-@resizer-size: 16px;
+$resizer-size: 16px;
 
 img {
   max-width: 100%;
@@ -34,15 +32,15 @@ img {
 
 .resizer {
   position: absolute;
-  right: -@resizer-size / 2;
+  right: calc(-#{$resizer-size} / 2);
   bottom: 2px;
-  width: @resizer-size;
-  height: @resizer-size;
+  width: $resizer-size;
+  height: $resizer-size;
   cursor: se-resize;
   user-select: none;
   background-color: white;
   border: 2px solid var(--v-grey-darken4);
-  border-radius: @resizer-size;
+  border-radius: $resizer-size;
 }
 
 .edit-options {
@@ -55,11 +53,11 @@ img {
 
   // TUI will automatically move cursor inside button,
   // so don't allow clicking on elements inside the button
-  /deep/ * {
+  ::v-deep * {
     pointer-events: none;
   }
 
-  /deep/ .v-btn__content {
+  ::v-deep .v-btn__content {
     height: min-content;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/Menu.vue b/contentcuration/contentcuration/frontend/shared/views/Menu.vue
index 6b433ed8c8..c86b06d164 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Menu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Menu.vue
@@ -33,6 +33,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue b/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue
index 9e758cf541..f7fc3d6ddb 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue
@@ -59,13 +59,13 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   p {
     font-size: 12pt;
   }
 
-  /deep/ .v-btn {
+  ::v-deep .v-btn {
     font-weight: bold;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/PageContainer.vue b/contentcuration/contentcuration/frontend/shared/views/PageContainer.vue
index 72604063e8..94e8dfdba3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/PageContainer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/PageContainer.vue
@@ -17,7 +17,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .page-container {
     padding: 32px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue
index a70781871b..44cd24802d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue
@@ -172,13 +172,13 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   /*! rtl:begin:ignore */
   .drawer-left {
     right: auto;
 
-    /deep/ .v-navigation-drawer__border {
+    ::v-deep .v-navigation-drawer__border {
       margin-left: 3px;
       border-right: 1px solid var(--v-grey-lighten4);
     }
@@ -187,7 +187,7 @@
   .drawer-right {
     left: auto;
 
-    /deep/ .v-navigation-drawer__border {
+    ::v-deep .v-navigation-drawer__border {
       margin-right: 3px;
       border-left: 1px solid var(--v-grey-lighten4);
     }
@@ -195,7 +195,7 @@
 
   /*! rtl:end:ignore */
 
-  .draggable /deep/ .v-navigation-drawer__border {
+  .draggable ::v-deep .v-navigation-drawer__border {
     z-index: 16;
     width: 3px;
     height: 100%;
@@ -204,7 +204,7 @@
     transition: background 0.2s ease;
 
     &:hover,
-    .dragging& {
+    &.dragging {
       background: var(--v-secondary-base) !important;
     }
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/Sandbox.vue b/contentcuration/contentcuration/frontend/shared/views/Sandbox.vue
index e28becc6fd..0810e329e3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Sandbox.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Sandbox.vue
@@ -19,5 +19,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/Tabs.vue b/contentcuration/contentcuration/frontend/shared/views/Tabs.vue
index 74de43f029..07ca152b6d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/Tabs.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/Tabs.vue
@@ -109,7 +109,7 @@
 
 </script>
 
-<style lang="less">
+<style lang="scss">
 
   /*! rtl:begin:ignore */
   [dir='rtl'] {
diff --git a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
index aef5a6cbb3..380da0f66d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ToggleText.vue
@@ -93,7 +93,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .text {
     margin: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/ToolBar.vue b/contentcuration/contentcuration/frontend/shared/views/ToolBar.vue
index e1f20efce7..f7848edfce 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ToolBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ToolBar.vue
@@ -28,9 +28,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-toolbar__content {
+  ::v-deep .v-toolbar__content {
     border-bottom: 1px solid transparent;
 
     .elevation-0 & {
diff --git a/contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue b/contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue
index adcffb8ef3..366c8a4932 100644
--- a/contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/VIconWrapper.vue
@@ -34,7 +34,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   // A workaround for this issue:
   // https://github.com/vuetifyjs/vuetify/issues/3462
diff --git a/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
index 5486c444f9..521d830a35 100644
--- a/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
@@ -124,7 +124,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-icon {
     margin-left: 5px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogFrontPage.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogFrontPage.vue
index 74a145f260..3c4569f606 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogFrontPage.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogFrontPage.vue
@@ -118,7 +118,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .container {
     min-width: 50%;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogPrint.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogPrint.vue
index 119c916f19..065e719654 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogPrint.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelCatalogPrint.vue
@@ -115,7 +115,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .underlay {
     position: fixed;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
index 017fe11f12..33488a443a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
@@ -170,7 +170,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-toolbar__title {
     font-weight: bold;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
index 97646e7aca..dfff132d5b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
@@ -419,7 +419,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .channel-info {
     border: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
index 0488f0f5cf..17a608603b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelSharing.vue
@@ -166,7 +166,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-select .v-input__slot {
     height: 56px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
index 4a9a59f395..d42f95d7e4 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
@@ -323,9 +323,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ canvas {
+  ::v-deep canvas {
     border: 2px solid var(--v-grey-darken2);
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue
index 8cfb53b294..1d45290cb9 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue
@@ -56,6 +56,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index f6170a8b9a..30bd844a67 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -272,7 +272,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .parentOption:not(:first-child) {
     border-top: 1px solid rgba(0, 0, 0, 0.12);
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/ActivityDuration.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/ActivityDuration.vue
index a3606057b5..19b42544d5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/ActivityDuration.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/ActivityDuration.vue
@@ -223,7 +223,7 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .defaultUpload {
     margin: 0.8em;
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaGoal.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaGoal.vue
index ab9d0b06e9..703071ca7d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaGoal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaGoal.vue
@@ -113,7 +113,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-autocomplete {
     display: inline-block;
@@ -149,7 +149,7 @@
     }
   }
 
-  /deep/ a {
+  ::v-deep a {
     text-decoration: none !important;
 
     &:hover {
@@ -157,7 +157,7 @@
     }
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     width: 100%;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaMofNFields.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaMofNFields.vue
index 6b9755902e..ac21f74633 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaMofNFields.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/MasteryCriteriaMofNFields.vue
@@ -192,7 +192,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-autocomplete {
     display: inline-block;
@@ -228,7 +228,7 @@
     }
   }
 
-  /deep/ a {
+  ::v-deep a {
     text-decoration: none !important;
 
     &:hover {
@@ -236,7 +236,7 @@
     }
   }
 
-  /deep/ .v-list__tile {
+  ::v-deep .v-list__tile {
     width: 100%;
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
index ce1f49b8b8..17cea8b862 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
@@ -82,6 +82,6 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
index e300b281a0..6d4d1fb90c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
@@ -84,6 +84,6 @@
   };
 
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
index 8585ed7911..2752c8e9b0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
@@ -81,6 +81,6 @@
   };
 
 </script>
-<style lang="less">
+<style lang="scss">
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/Details.vue b/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
index 03ace0c8fd..efab758c0f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
@@ -549,9 +549,9 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  .printing /deep/ * {
+  .printing ::v-deep * {
     font-family: 'Noto Sans', helvetica !important;
 
     &.material-icons {
@@ -591,7 +591,7 @@
     max-width: 350px;
     font-size: 12pt;
 
-    /deep/ tr {
+    ::v-deep tr {
       border-top: 0 !important;
 
       &:hover {
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/DetailsRow.vue b/contentcuration/contentcuration/frontend/shared/views/details/DetailsRow.vue
index 2288a8c6c6..c781c01f16 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/DetailsRow.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/DetailsRow.vue
@@ -59,7 +59,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .flex {
     word-break: break-word;
diff --git a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableCollection.vue b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableCollection.vue
index c3ccf70628..1e93732d76 100644
--- a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableCollection.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableCollection.vue
@@ -9,5 +9,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableHandle.vue b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableHandle.vue
index 5370009efb..5d10e26289 100644
--- a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableHandle.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableHandle.vue
@@ -9,5 +9,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableItem.vue b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableItem.vue
index 17f0abe8d7..4050723e39 100644
--- a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableItem.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableItem.vue
@@ -9,5 +9,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggablePlaceholder.vue b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggablePlaceholder.vue
index da091e485c..8dbfbf3085 100644
--- a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggablePlaceholder.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggablePlaceholder.vue
@@ -43,7 +43,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .drag-placeholder {
     position: absolute;
diff --git a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableRegion.vue b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableRegion.vue
index 0041b90892..c66f5831ef 100644
--- a/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableRegion.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/draggable/DraggableRegion.vue
@@ -9,5 +9,5 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/AppError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/AppError.vue
index 409359f11e..c49e1f6356 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/AppError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/AppError.vue
@@ -30,7 +30,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .details {
     max-width: 675px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/ChannelDeletedError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/ChannelDeletedError.vue
index a853ddea3f..e317726c3c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/ChannelDeletedError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/ChannelDeletedError.vue
@@ -43,4 +43,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/ChannelNotFoundError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/ChannelNotFoundError.vue
index 3852510005..b6115d20ac 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/ChannelNotFoundError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/ChannelNotFoundError.vue
@@ -43,4 +43,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/GenericError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/GenericError.vue
index d76af80b6e..57e6c8e0dc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/GenericError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/GenericError.vue
@@ -80,4 +80,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/PageNotFoundError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/PageNotFoundError.vue
index 25b8405e0a..0012a4beaa 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/PageNotFoundError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/PageNotFoundError.vue
@@ -47,4 +47,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/PermissionsError.vue b/contentcuration/contentcuration/frontend/shared/views/errors/PermissionsError.vue
index 1dbde60a97..52df9da589 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/PermissionsError.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/PermissionsError.vue
@@ -44,4 +44,4 @@
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/ReportErrorModal.vue b/contentcuration/contentcuration/frontend/shared/views/errors/ReportErrorModal.vue
index b82e1024a2..b117bfb910 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/ReportErrorModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/ReportErrorModal.vue
@@ -96,7 +96,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .error-detail-modal {
     text-align: left;
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileDropzone.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileDropzone.vue
index 112330e69f..869a823965 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/FileDropzone.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/FileDropzone.vue
@@ -70,7 +70,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
index f277c54d2e..2962e27edd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
@@ -62,7 +62,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-icon {
     cursor: default;
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileStatusText.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileStatusText.vue
index a5923fc2d6..65d754c645 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/FileStatusText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/FileStatusText.vue
@@ -73,9 +73,9 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ canvas {
+  ::v-deep canvas {
     border: 2px solid var(--v-grey-darken2);
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue
index 61e1e8c37e..17c968a335 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/FileStorage.vue
@@ -102,7 +102,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-icon {
     margin-right: 5px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
index 6101b531cb..d9d0a09391 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/ImageOnlyThumbnail.vue
@@ -125,14 +125,14 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @caption-height: 25px;
+  $caption-height: 25px;
 
   .thumbnail {
     position: relative;
     /* stylelint-disable-next-line  */
-    padding-bottom: 100% * 9 / 16;
+    padding-bottom: calc(100% * 9 / 16);
     border-radius: 3px;
 
     &.nothumbnail {
@@ -150,7 +150,7 @@
 
   .caption {
     width: 100%;
-    height: @caption-height;
+    height: $caption-height;
     padding: 0 5px;
     line-height: 11px;
   }
@@ -169,20 +169,18 @@
     overflow: hidden; // Don't show alt text outside of img boundaries
 
     .caption + & {
-      height: calc(100% - @caption-height);
+      height: calc(100% - $caption-height);
     }
   }
 
-  @svg-scale: 1.25;
-
-  @svg-width: 100% * 9 / 16 / @svg-scale;
-
-  @svg-top: (100% * 9 / 16 / 2) - (@svg-width / 2);
+  $svg-scale: 1.25;
+  $svg-width: calc(100% * 9 / 16 / $svg-scale);
+  $svg-top: calc((100% * 9 / 16 / 2) - ($svg-width / 2));
 
   svg.thumbnail-image {
     top: 0;
-    left: 50% - (@svg-width / 4);
-    width: @svg-width / 4;
+    left: calc(50% - ($svg-width / 4));
+    width: calc($svg-width / 4);
     margin: 0 auto;
     overflow: visible;
 
@@ -205,7 +203,7 @@
 
   svg.nothumbnail-image {
     top: 0;
-    width: @svg-width;
+    width: $svg-width;
     margin: 0 auto;
     overflow: visible;
 
@@ -218,7 +216,7 @@
     }
 
     .caption + & {
-      top: calc((@caption-height / 2) + @svg-top);
+      top: calc(($caption-height / 2) + $svg-top);
     }
 
     .icon-only & {
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
index 007ebb73d1..bf90e481b2 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
@@ -163,14 +163,14 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  @caption-height: 25px;
+  $caption-height: 25px;
 
   .thumbnail {
     position: relative;
     /* stylelint-disable-next-line  */
-    padding-bottom: 100% * 9 / 16;
+    padding-bottom: calc(100% * 9 / 16);
 
     &.icon-only {
       padding-top: 0;
@@ -193,7 +193,7 @@
 
   .caption {
     width: 100%;
-    height: @caption-height;
+    height: $caption-height;
     padding: 0 5px;
     line-height: 11px;
   }
@@ -212,18 +212,18 @@
     overflow: hidden; // Don't show alt text outside of img boundaries
 
     .caption + & {
-      height: calc(100% - @caption-height);
+      height: calc(100% - $caption-height);
     }
   }
 
-  @svg-scale: 1.25;
-  @svg-width: 100% * 9 / 16 / @svg-scale;
-  @svg-top: (100% * 9 / 16 / 2) - (@svg-width / 2);
+  $svg-scale: 1.25;
+  $svg-width: calc(100% * 9 / 16 / $svg-scale);
+  $svg-top: calc((100% * 9 / 16 / 2) - ($svg-width / 2));
 
   svg.thumbnail-image {
     top: 0;
-    left: 50% - (@svg-width / 4);
-    width: @svg-width / 4;
+    left: calc(50% - ($svg-width / 4));
+    width: calc($svg-width / 4);
     margin: 0 auto;
     overflow: visible;
 
@@ -246,7 +246,7 @@
 
   svg.nothumbnail-image {
     top: 0;
-    width: @svg-width;
+    width: $svg-width;
     margin: 0 auto;
     overflow: visible;
 
@@ -259,7 +259,7 @@
     }
 
     .caption + & {
-      top: calc((@caption-height / 2) + @svg-top);
+      top: calc(($caption-height / 2) + $svg-top);
     }
 
     .icon-only & {
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
index e70f6305e2..a3d312a0ab 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
@@ -256,7 +256,7 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .storage-alert {
     font-size: 12pt;
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue b/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue
index af75cf5a71..cc85b3e6b7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue
@@ -149,9 +149,9 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ label.theme--light {
+  ::v-deep label.theme--light {
     padding: 0 8px;
     color: var(--v-text);
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/ContentDefaults.vue b/contentcuration/contentcuration/frontend/shared/views/form/ContentDefaults.vue
index f5fcd9a8cf..3eb309e5ee 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/ContentDefaults.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/ContentDefaults.vue
@@ -244,7 +244,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .content-defaults {
     border: 0;
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue b/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue
index d97a8cacdf..9ec183502e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue
@@ -110,9 +110,9 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
-  /deep/ .v-select__selections {
+  ::v-deep .v-select__selections {
     width: calc(100% - 48px); // Account for clear icon
     min-height: 0 !important;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/EmailField.vue b/contentcuration/contentcuration/frontend/shared/views/form/EmailField.vue
index ad28d0b91e..762b6ae094 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/EmailField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/EmailField.vue
@@ -63,7 +63,7 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .form-section {
     font-size: 14px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/MultiSelect.vue b/contentcuration/contentcuration/frontend/shared/views/form/MultiSelect.vue
index 7407935873..b10389a0a7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/MultiSelect.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/MultiSelect.vue
@@ -132,19 +132,19 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
   .v-select {
     max-width: 500px;
   }
 
-  /deep/ .v-select__selections {
+  ::v-deep .v-select__selections {
     width: calc(100% - 48px);
     min-height: 0 !important;
   }
 
   .v-chip,
-  /deep/ .v-chip__content,
+  ::v-deep .v-chip__content,
   .text-truncate {
     max-width: 100%;
     overflow: hidden;
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/PasswordField.vue b/contentcuration/contentcuration/frontend/shared/views/form/PasswordField.vue
index e82df91b74..3972728ab1 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/PasswordField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/PasswordField.vue
@@ -79,6 +79,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/TextArea.vue b/contentcuration/contentcuration/frontend/shared/views/form/TextArea.vue
index 1db05d1b9d..cf6c27b040 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/TextArea.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/TextArea.vue
@@ -68,6 +68,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/TextField.vue b/contentcuration/contentcuration/frontend/shared/views/form/TextField.vue
index 0c00c75649..e37bb543d3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/TextField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/TextField.vue
@@ -67,6 +67,6 @@
 </script>
 
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/package.json b/package.json
index 85f82526a4..68c73b2aef 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "description": "Frontend build tools and development utilities for Kolibri Studio",
   "scripts": {
     "lint:py": "flake8 --exit-zero",
-    "lint-frontend": "kolibri-tools lint --pattern 'contentcuration/contentcuration/frontend/**/*.{js,vue,scss,less,css}' --ignore '**/dist/**,**/node_modules/**,**/static/**'",
+    "lint-frontend": "kolibri-tools lint --pattern 'contentcuration/contentcuration/frontend/**/*.{js,vue,scss,css}' --ignore '**/dist/**,**/node_modules/**,**/static/**'",
     "lint-frontend:format": "yarn run lint-frontend --write",
     "lint-frontend:watch": "yarn run lint-frontend --monitor",
     "lint-frontend:watch:format": "yarn run lint-frontend --monitor --write",
@@ -115,8 +115,6 @@
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "jest-serializer-vue": "^3.1.0",
     "kolibri-tools": "0.16.0-dev.3",
-    "less": "^3.0.1",
-    "less-loader": "^11.1.3",
     "npm-run-all": "^4.1.3",
     "stylus": "^0.63.0",
     "stylus-loader": "^7.1.3",
diff --git a/webpack.config.js b/webpack.config.js
index 3e1432d31a..fb0ef0dec9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -101,10 +101,6 @@ module.exports = (env = {}) => {
           test: /\.styl(us)?$/,
           use: baseCssLoaders.concat('stylus-loader'),
         },
-        {
-          test: /\.less?$/,
-          use: baseCssLoaders.concat('less-loader'),
-        },
       ],
     },
     resolve: {
@@ -116,7 +112,7 @@ module.exports = (env = {}) => {
         vuetify: path.resolve('node_modules', 'vuetify'),
         static: staticFilesDir,
       },
-      extensions: ['.js', '.vue', '.css', '.less'],
+      extensions: ['.js', '.vue', '.css'],
       modules: [rootNodeModules],
     },
     resolveLoader: {