Update CSS import

client/src/App.vue

@@ -110,7 +110,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 body {
   overflow-y: auto;

client/src/components/AddContentButton.vue

@@ -76,7 +76,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .add-content {
   display: none;

client/src/components/AddWidget.vue

@@ -53,7 +53,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .add-widget {
   display: none;

client/src/components/AssignmentWithSubmissions.vue

@@ -105,7 +105,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .assignment-with-submissions {
   &__title {

client/src/components/BackLink.vue

@@ -70,7 +70,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .back-link {
   @include regular-text;

client/src/components/Chapter.vue

@@ -232,7 +232,7 @@ const textHidden = (type: string) => {
 
 <style lang="scss">
 /* todo: re-add `scoped`, same as in ContentBlock.vue  */
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .chapter {
   position: relative;

client/src/components/ContentBlock.vue

@@ -357,7 +357,7 @@ const root = computed(() => {
 
 <style lang="scss">
 /* todo: re-add `scoped` after switch to vite or this bug is fixed: https://github.com/vuejs/vue-loader/issues/1915 */
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .content-block {
   margin-bottom: $section-spacing;

client/src/components/CopyLink.vue

@@ -37,7 +37,7 @@ const copyLink = () => {
 </script>
 
 <style lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 .copy-link {
   display: inline-flex;
   align-items: center;

client/src/components/HeaderBar.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .header-bar {
   display: flex;

client/src/components/LoadingButton.vue

@@ -41,7 +41,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .loading-button {
   height: 52px;

client/src/components/MobileHeader.vue

@@ -46,7 +46,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .mobile-header {
   justify-content: space-between;

client/src/components/MoreOptionsWidget.vue

@@ -38,7 +38,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .more-options {
   display: flex;

client/src/components/ReadOnlyBanner.vue

@@ -81,7 +81,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .read-only-banner {
   background-color: $color-brand-light;

client/src/components/StudentSubmission.vue

@@ -70,7 +70,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .student-submission {
   @include table-row;

client/src/components/UserWidget.vue

@@ -40,7 +40,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .user-widget {
   color: $color-silver-dark;

client/src/components/book-navigation/SubNavigationItem.vue

@@ -24,9 +24,9 @@
 <script>
 import { defineAsyncComponent } from 'vue';
 const ChevronDown = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown')
+  import('@/components/icons/ChevronDown.vue')
 );
-const ChevronUp = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronUp'));
+const ChevronUp = defineAsyncComponent(() => import('@/components/icons/ChevronUp.vue'));
 
 export default {
   props: ['title'],

client/src/components/book-navigation/TopicNavigation.vue

@@ -56,7 +56,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .topic-navigation {
   display: flex;

client/src/components/content-block-form/AddContentLink.vue

@@ -15,7 +15,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 $color: $color-silver-dark;
 $icon-size: 14px;
 

client/src/components/content-block-form/ContentBlockForm.vue

@@ -333,7 +333,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 // override parent page properties
 .layout--no-scroll {
   padding-bottom: 20px;
@@ -351,7 +351,7 @@ export default defineComponent({
 </style>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .content-block-form {
   max-width: 100%;

client/src/components/content-block-form/ContentElement.vue

@@ -362,7 +362,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .content-element {
   display: flex;

client/src/components/content-block-form/ContentElementActions.vue

@@ -117,7 +117,7 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .content-element-actions {
   position: relative;

client/src/components/content-block-form/ContentFormSection.vue

@@ -57,7 +57,7 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .content-form-section {
   @include default-box-shadow;

client/src/components/content-block-form/ContentsForm.vue

@@ -164,7 +164,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .contents-form {
   /* top level does not exist, because of the modal */

client/src/components/content-blocks/CmsDocumentBlock.vue

@@ -36,7 +36,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .cms-document-block {
   display: grid;

client/src/components/content-blocks/ContentComponent.vue

@@ -181,7 +181,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .content-component {
   position: relative;

client/src/components/content-blocks/DocumentBlock.vue

@@ -48,7 +48,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .document-block {
   display: grid;

client/src/components/content-blocks/ImageBlock.vue

@@ -19,7 +19,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .image-block {
   width: 100%;

client/src/components/content-blocks/InstrumentWidget.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_variables.scss';
+@import 'styles/_variables.scss';
 
 .instrument-widget {
   margin-bottom: $small-spacing;

client/src/components/content-blocks/Solution.vue

@@ -62,7 +62,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .solution {
   display: grid;

client/src/components/content-blocks/SubtitleBlock.vue

@@ -22,7 +22,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .subtitle {
   padding-top: 1px;

client/src/components/content-blocks/TextBlock.vue

@@ -21,7 +21,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .text-block {
   margin-bottom: $medium-spacing; // if calc is not supported

client/src/components/content-blocks/assignment/FinalSubmission.vue

@@ -61,7 +61,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .final-submission {
   &__text {

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -113,7 +113,7 @@ const changeDocumentUrl = (documentUrl: string) => {
 
 <style lang="scss">
 // todo: use `scoped` once no longer on webpack
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .submission-form-container {
   @include form-with-border;

client/src/components/content-blocks/assignment/SubmissionInput.vue

@@ -53,7 +53,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .submission-form {
   display: flex;

client/src/components/content-forms/AssignmentForm.vue

@@ -32,7 +32,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .assignment-form {
   display: grid;

client/src/components/content-forms/ChooserElement.vue

@@ -51,7 +51,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .chooser-element {
   cursor: pointer;

client/src/components/content-forms/ContentBlockElementChooserWidget.vue

@@ -140,7 +140,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .content-block-element-chooser-widget {
   display: -ms-grid;

client/src/components/content-forms/DocumentForm.vue

@@ -83,7 +83,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .document-form {
   &__uploaded {

client/src/components/content-forms/ImageForm.vue

@@ -99,7 +99,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .image-form {
   &__error {

client/src/components/content-forms/LinkForm.vue

@@ -23,7 +23,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .link-form {
   display: grid;

client/src/components/content-forms/SubtitleForm.vue

@@ -39,7 +39,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .subtitle-form {
   &__input {

client/src/components/content-forms/TextForm.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .text-form {
   &__input {

client/src/components/content-forms/TipTap.vue

@@ -105,7 +105,7 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .tip-tap {
   &__editor-wrapper {

client/src/components/icons/BookmarkIcon.vue

@@ -24,7 +24,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/variables';
+@import 'styles/variables';
 
 .bookmark-icon {
   width: 24px;

client/src/components/icons/DocumentWithLinesIcon.vue

@@ -37,5 +37,5 @@
 </template>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 </style>

client/src/components/instruments/FilterEntry.vue

@@ -105,7 +105,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .filter-entry {
   display: flex;

client/src/components/instruments/FilterGroup.vue

@@ -85,7 +85,7 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .filter-group {
   border-bottom: 1px solid $color-silver;

client/src/components/instruments/InstrumentEntry.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .instrument-entry {
   padding: $medium-spacing;

client/src/components/instruments/InstrumentFilter.vue

@@ -39,7 +39,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .instrument-filter {
   display: none;

client/src/components/modals/Confirm.vue

@@ -69,7 +69,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .confirm-dialog {
   &__heading {

client/src/components/modules/Module.vue

@@ -121,7 +121,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .module {
   display: flex;

client/src/components/modules/ModuleNavigation.vue

@@ -129,7 +129,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 @mixin module-navigation-typography {
   font-family: $sans-serif-font-family;

client/src/components/modules/ModuleSubNavigation.vue

@@ -33,7 +33,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 @mixin module-navigation-typography {
   font-family: $sans-serif-font-family;

client/src/components/modules/ModuleTeaser.vue

@@ -43,7 +43,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .module-teaser {
   box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);

client/src/components/modules/SnapshotCreated.vue

@@ -71,7 +71,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .snapshot-created {
   &__heading {

client/src/components/modules/SnapshotHeader.vue

@@ -154,7 +154,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .snapshot-header {
   &__subtitle {

client/src/components/modules/SnapshotListItem.vue

@@ -231,7 +231,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .snapshot-list-item {
   display: flex;

client/src/components/modules/SnapshotMenu.vue

@@ -126,7 +126,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .snapshot-menu {
   position: relative;

client/src/components/modules/SnapshotTeamMenu.vue

@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .snapshot-team-menu {
   display: flex;

client/src/components/news/NewsTeaser.vue

@@ -31,7 +31,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .news-teaser {
   position: relative;

client/src/components/notes/BookmarkActions.vue

@@ -65,7 +65,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .bookmark-actions {
   height: 100%;

client/src/components/objective-groups/ObjectiveGroup.vue

@@ -77,7 +77,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .objective-group {
   position: relative;

client/src/components/objective-groups/ObjectiveGroups.vue

@@ -59,7 +59,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .objective-groups {
   margin-bottom: $large-spacing;

client/src/components/page-form/PageForm.vue

@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .page-form {
   width: 710px;

client/src/components/portfolio/AddProjectEntry.vue

@@ -24,7 +24,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .add-project-entry {
   display: flex;

client/src/components/portfolio/CreateProjectButton.vue

@@ -22,5 +22,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 </style>

client/src/components/portfolio/PortfolioOnboarding.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .portfolio-onboarding {
   @include onboarding-page;

client/src/components/portfolio/ProjectActions.vue

@@ -140,7 +140,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_helpers.scss';
+@import 'styles/_helpers.scss';
 
 .project-actions {
   position: relative;

client/src/components/portfolio/ProjectEntry.vue

@@ -123,7 +123,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .project-entry {
   background-color: $color-white;

client/src/components/portfolio/ProjectEntryForm.vue

@@ -97,7 +97,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .project-entry-modal {
   display: flex;

client/src/components/portfolio/ProjectForm.vue

@@ -70,7 +70,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .project-form {
   @include widget-shadow;

client/src/components/portfolio/ProjectList.vue

@@ -28,7 +28,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .project-list {
   border-top: 1px solid $color-silver;

client/src/components/portfolio/ProjectListItem.vue

@@ -64,7 +64,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .project {
   display: flex;

client/src/components/portfolio/ProjectWidget.vue

@@ -63,7 +63,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .project-widget {
   border-radius: $default-border-radius;

client/src/components/portfolio/ShareLink.vue

@@ -28,7 +28,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .share-icon {
   display: flex;

client/src/components/profile/Avatar.vue

@@ -87,7 +87,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 $max-width: 100%;
 

client/src/components/profile/DeactivatePerson.vue

@@ -88,7 +88,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .deactivate-user {
   &__heading {

client/src/components/profile/EditGroupName.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/_variables.scss';
+@import 'styles/_variables.scss';
 
 .edit-group-name {
   &__icon {

client/src/components/profile/EditTeamNameWizard.vue

@@ -73,5 +73,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 </style>

client/src/components/profile/GroupList.vue

@@ -155,7 +155,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .group-list {
   display: grid;

client/src/components/profile/JoinForm.vue

@@ -77,5 +77,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 </style>

client/src/components/profile/ProfileSidebar.vue

@@ -114,7 +114,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 $desktop-width: 333px;
 

client/src/components/profile/ShowCode.vue

@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .show-code {
   &__title {

client/src/components/rooms/AddRoomEntryButton.vue

@@ -35,7 +35,7 @@ const addRoomEntryRoute = {
 
 <style lang="scss">
 // todo: re-add scoped once we're on vite
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .add-room-entry-button {
   border: 2px solid $color-white;

client/src/components/rooms/ChangeVisibility.vue

@@ -83,7 +83,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .change-visibility {
   &__heading {

client/src/components/rooms/Comment.vue

@@ -37,7 +37,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .comment {
   display: grid;

client/src/components/rooms/CommentInput.vue

@@ -52,7 +52,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .comment-input {
   @include form-with-border;

client/src/components/rooms/EntryCountWidget.vue

@@ -36,7 +36,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .entry-count-widget {
   display: flex;

client/src/components/rooms/MoreActions.vue

@@ -50,7 +50,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .more-actions {
   svg {

client/src/components/rooms/RoomActions.vue

@@ -121,7 +121,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 $height: 30px;
 

client/src/components/rooms/RoomEntry.vue

@@ -95,7 +95,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .room-entry {
   border-radius: 12px;

client/src/components/rooms/RoomEntryActions.vue

@@ -107,7 +107,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 $height: 30px;
 

client/src/components/rooms/RoomForm.vue

@@ -87,7 +87,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .room-form {
   &__property-heading {

client/src/components/rooms/RoomGroupWidget.vue

@@ -21,7 +21,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .room-group-widget {
   display: flex;

client/src/components/rooms/RoomVisibilityWidget.vue

@@ -34,7 +34,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .room-visibility-widget {
   display: flex;

client/src/components/rooms/RoomWidget.vue

@@ -68,7 +68,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .room-widget {
   display: -ms-grid;

client/src/components/rooms/RoomsOnboarding.vue

@@ -51,7 +51,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .rooms-onboarding {
   @include onboarding-page;

client/src/components/school-class/ClassSelectionWidget.vue

@@ -110,7 +110,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .class-selection {
   position: relative;

client/src/components/ui/ButtonWithIconAndText.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .button-with-icon-and-text {
   display: flex;

client/src/components/ui/EmojiBar.vue

@@ -22,7 +22,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+@import 'styles/helpers';
 
 .emoji-bar {
   display: flex;