All style imports use @ webpack alias for root.

src/components/AllRequestedWines.vue

@@ -39,8 +39,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/media-queries.scss";
-@import "./src/styles/variables.scss";
+@import "@/styles/media-queries.scss";
+@import "@/styles/variables.scss";
 
 .container {
   width: 90vw;

src/components/AllWinesPage.vue

@@ -62,8 +62,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/media-queries";
-@import "./src/styles/variables";
+@import "@/styles/media-queries";
+@import "@/styles/variables";
 
 .container {
   width: 90vw;

src/components/HighscorePage.vue

@@ -93,8 +93,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/media-queries.scss";
-@import "./src/styles/variables.scss";
+@import "@/styles/media-queries.scss";
+@import "@/styles/variables.scss";
 $elementSpacing: 3.5rem;
 
 .el-spacing {

src/components/PersonalHighscorePage.vue

@@ -125,8 +125,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/variables";
-@import "./src/styles/media-queries";
+@import "@/styles/variables";
+@import "@/styles/media-queries";
 
 $elementSpacing: 3rem;
 

src/components/RequestWine.vue

@@ -97,9 +97,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/media-queries";
-@import "./src/styles/global";
-@import "./src/styles/variables";
+@import "@/styles/media-queries";
+@import "@/styles/global";
+@import "@/styles/variables";
 
 
 h1{

src/components/TodaysPage.vue

@@ -30,8 +30,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/media-queries";
-@import "./src/styles/variables";
+@import "@/styles/media-queries";
+@import "@/styles/variables";
 
 .wine-image {
   height: 250px;

src/components/WinnerPage.vue

@@ -70,7 +70,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/global";
+@import "@/styles/global";
 .container {
   display: flex;
   justify-content: center;

src/ui/RequestedWineCard.vue

@@ -77,7 +77,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/variables";
+@import "@/styles/variables";
 
 .requested-count {
   display: flex;

src/ui/ScanToVinmonopolet.vue

@@ -94,8 +94,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/variables";
-@import "./src/styles/global";
+@import "@/styles/variables";
+@import "@/styles/global";
 
 video {
   width: 100%;

src/ui/Wine.vue

@@ -62,8 +62,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/media-queries";
-@import "./src/styles/variables";
+@import "@/styles/media-queries";
+@import "@/styles/variables";
 
 .wine {
   padding: 1rem;

src/ui/Wines.vue

@@ -124,8 +124,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./src/styles/variables.scss";
-@import "./src/styles/global.scss";
+@import "@/styles/variables.scss";
+@import "@/styles/global.scss";
 @import "../styles/media-queries.scss";
 
 .wines-main-container {