Updated all scss imports to be relative from src alias

Alias defined in webpack.config.js

src/components/404.vue

@@ -31,8 +31,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
 
 .button {
   font-size: 1.2rem;

src/components/ActivityPage.vue

@@ -287,7 +287,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
+@import "src/scss/variables";
 
 .wrapper {
   padding: 2rem;

src/components/AutocompleteDropdown.vue

@@ -5,9 +5,9 @@
         v-for="result in searchResults"
         :key="`${result.index}-${result.title}-${result.type}`"
         @click="openPopup(result)"
-        :class="`result di-${result.index} ${
-          result.index === index ? 'active' : ''
-        }`"
+        :class="
+          `result di-${result.index} ${result.index === index ? 'active' : ''}`
+        "
       >
         <IconMovie v-if="result.type == 'movie'" class="type-icon" />
         <IconShow v-if="result.type == 'show'" class="type-icon" />
@@ -131,9 +131,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-@import "./src/scss/main";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
+@import "src/scss/main";
 $sizes: 22;
 
 @for $i from 0 through $sizes {
@@ -223,7 +223,6 @@ li.result {
   &:hover,
   &:active {
     color: var(--text-color);
-    // background-color: var(--background-color-secondary);
     border-bottom: 2px solid var(--color-green);
 
     .type-icon {

src/components/LandingBanner.vue

@@ -55,8 +55,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
 
 header {
   width: 100%;

src/components/ListHeader.vue

@@ -42,9 +42,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-@import "./src/scss/main";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
+@import "src/scss/main";
 
 header {
   width: 100%;

src/components/Movie.vue

@@ -329,10 +329,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/loading-placeholder";
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-@import "./src/scss/main";
+@import "src/scss/loading-placeholder";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
+@import "src/scss/main";
 
 header {
   $duration: 0.2s;

src/components/MoviePopup.vue

@@ -63,8 +63,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
 
 .movie-popup {
   position: fixed;

src/components/MoviesListItem.vue

@@ -110,9 +110,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-@import "./src/scss/main";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
+@import "src/scss/main";
 
 .movie-item {
   padding: 15px;
@@ -190,7 +190,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
+@import "src/scss/variables";
 
 .progress {
   position: absolute;

src/components/NavigationHeader.vue

@@ -63,8 +63,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
 
 .spacer {
   @include mobile-only {

src/components/NavigationIcons.vue

@@ -91,7 +91,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/media-queries";
+@import "src/scss/media-queries";
 
 .navigation-icons {
   display: inline-flex;

src/components/Profile.vue

@@ -131,8 +131,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
 
 .button--group {
   display: flex;

src/components/Register.vue

@@ -105,7 +105,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
+@import "src/scss/variables";
 
 section {
   padding: 1.3rem;

src/components/ResultsSection.vue

@@ -141,7 +141,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/media-queries";
+@import "src/scss/media-queries";
 
 .load-button {
   display: flex;

src/components/SearchInput.vue

@@ -156,9 +156,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
-@import "./src/scss/main";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
+@import "src/scss/main";
 
 .close-icon {
   position: absolute;

src/components/Settings.vue

@@ -153,8 +153,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
 
 a {
   text-decoration: none;

src/components/Signin.vue

@@ -95,7 +95,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
+@import "src/scss/variables";
 
 section {
   padding: 1.3rem;

src/components/TorrentList.vue

@@ -286,7 +286,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
+@import "src/scss/variables";
 .expanded {
   display: flex;
   padding: 0.25rem 1rem;

src/components/ui/Hamburger.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/media-queries";
+@import "src/scss/media-queries";
 
 .nav__hamburger {
   display: block;

src/components/ui/Loader.vue

@@ -7,7 +7,7 @@
 </template>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
+@import "src/scss/variables";
 
 .loader {
   display: flex;
@@ -16,7 +16,7 @@
   justify-content: center;
   align-items: center;
 
-  &--icon{
+  &--icon {
     border: 2px solid $text-color-70;
     border-radius: 50%;
     display: block;
@@ -32,7 +32,7 @@
       &:after {
         border: 7px solid $green-90;
         border-radius: 50%;
-        content: '';
+        content: "";
         left: 8px;
         position: absolute;
         top: 22px;
@@ -40,7 +40,9 @@
     }
   }
   @keyframes load {
-    100% { transform: rotate(360deg); }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 }
-</style>
+</style>

src/components/ui/LoadingPlaceholder.vue

@@ -22,6 +22,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/loading-placeholder";
-
-</style>
+@import "src/scss/loading-placeholder";
+</style>

src/components/ui/MovieDescription.vue

@@ -64,7 +64,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/media-queries";
+@import "src/scss/media-queries";
 
 .movie-description {
   font-weight: 300;

src/components/ui/MovieDetail.vue

@@ -23,7 +23,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/media-queries";
+@import "src/scss/media-queries";
 
 .movie-detail {
   margin-bottom: 20px;

src/components/ui/NavigationIcon.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/media-queries";
+@import "src/scss/media-queries";
 
 .navigation-link {
   display: grid;

src/components/ui/SeasonedButton.vue

@@ -32,8 +32,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
 
 button {
   display: inline-block;

src/components/ui/SeasonedInput.vue

@@ -68,8 +68,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
 
 .group {
   display: flex;

src/components/ui/SeasonedMessages.vue

@@ -47,8 +47,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
 
 .fade-enter-active {
   transition: opacity .4s;

src/components/ui/ToggleButton.vue

@@ -45,7 +45,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/scss/variables";
+@import "src/scss/variables";
 
 $background: $background-ui;
 $background-selected: $background-color-secondary;

src/components/ui/sidebarListElem.vue

@@ -24,7 +24,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./src/scss/media-queries";
+@import "src/scss/media-queries";
 
 li.sidebar-list-element {
   display: flex;

src/scss/elements.scss

@@ -1,5 +1,5 @@
-@import "./src/scss/variables";
-@import "./src/scss/media-queries";
+@import "src/scss/variables";
+@import "src/scss/media-queries";
 
 .filter {
   margin: 1rem;

src/scss/loading-placeholder.scss

@@ -1,4 +1,4 @@
-@import "./src/scss/variables";
+@import "src/scss/variables";
 
 // Loading placeholder styling
 @mixin nth-children($points...) {

src/scss/main.scss

@@ -1,4 +1,4 @@
-@import "./src/scss/variables";
+@import "src/scss/variables";
 
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */

src/scss/variables.scss

@@ -1,6 +1,6 @@
 // Colors
 // @import "./media-queries";
-@import "./src/scss/media-queries";
+@import "src/scss/media-queries";
 
 :root {
   color-scheme: light;