diff --git a/app.config.react.js b/app.config.react.js
index 58047c1d2be07c2a62879477f9978c1091d6d818..7dba378a9311428eefd03c8b39dfb743be15bee0 100644
--- a/app.config.react.js
+++ b/app.config.react.js
@@ -42,11 +42,7 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        loaders: [
-          require.resolve('style-loader'),
-          require.resolve('css-loader'),
-          require.resolve('sass-loader'),
-        ],
+        use: ['style-loader', 'css-loader', 'sass-loader'],
       },
     ],
   },
diff --git a/src/components/Action/actionBegin.scss b/src/components/Action/actionBegin.scss
index 8acf26de8cfdcecb1fb86f806ef72cd3b17e310f..06c170409b17adcaaea2736f0c89dac2573d6dda 100644
--- a/src/components/Action/actionBegin.scss
+++ b/src/components/Action/actionBegin.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .action-begin {
   margin: auto;
diff --git a/src/components/Action/actionDone.scss b/src/components/Action/actionDone.scss
index 4a5de7d211b0b6e4d5015e55bb6eb9122e79fb99..ce2f02bcfcc24ce0030964bb18aa0da532c267e4 100644
--- a/src/components/Action/actionDone.scss
+++ b/src/components/Action/actionDone.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .action-done-container {
   max-width: 600px;
diff --git a/src/components/Action/actionList.scss b/src/components/Action/actionList.scss
index 4b4c65a2f9f66f5cbac5928d4be39fc04702fb75..94faf983a47a16a4c9274fc0a59211d8e095d580 100644
--- a/src/components/Action/actionList.scss
+++ b/src/components/Action/actionList.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .action-list-container {
   display: flex;
diff --git a/src/components/Action/actionModal.scss b/src/components/Action/actionModal.scss
index 5b35affa4321f50e90f2e3970945b3bc1e88df62..ff9d610dd92a77744ee8286fee2793ae44da5f62 100644
--- a/src/components/Action/actionModal.scss
+++ b/src/components/Action/actionModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .action-modal {
   display: flex;
diff --git a/src/components/Action/actionOnGoing.scss b/src/components/Action/actionOnGoing.scss
index c1f31851b985d3d79505823d26731969c9e8d816..8aa859eb56f35ce0c9e9a2923e9b8ea8ddea80d2 100644
--- a/src/components/Action/actionOnGoing.scss
+++ b/src/components/Action/actionOnGoing.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .action-ongoing {
   box-sizing: border-box;
diff --git a/src/components/Analysis/analysisView.scss b/src/components/Analysis/analysisView.scss
index 7022598c93fe5fac3c2d7b865d753f652c82639d..2b60ed6ff89b5ce799b3aa222e6357d2ec2b9d10 100644
--- a/src/components/Analysis/analysisView.scss
+++ b/src/components/Analysis/analysisView.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 .analysis-view-title {
   color: $grey-bright;
   text-align: center;
diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss
index 0ebbf57f0d969735a8bf699eecada672ae185dd1..582e0294335fc2798c65e68e6d61e271b2c19921 100644
--- a/src/components/Analysis/monthlyanalysis.scss
+++ b/src/components/Analysis/monthlyanalysis.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .analysis-root {
   display: flex;
diff --git a/src/components/Challenge/challengeCard.scss b/src/components/Challenge/challengeCard.scss
index 8e07734cfda7d76f59a96956cb1c93f7d11cfd32..ac7c9ebca6f8563570e67e724fe3529ca81ba5e3 100644
--- a/src/components/Challenge/challengeCard.scss
+++ b/src/components/Challenge/challengeCard.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .slide {
   margin: 0 1rem 0 0;
diff --git a/src/components/Challenge/challengeCardDone.scss b/src/components/Challenge/challengeCardDone.scss
index c7eee6ea1cbf3ec288d35b78d7130bfc64a957cd..d4ff21eb97b218ed8b8f6936b84a6d7bf176e641 100644
--- a/src/components/Challenge/challengeCardDone.scss
+++ b/src/components/Challenge/challengeCardDone.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/typo-variables';
-@import '../../styles/base/color';
+@import 'src/styles/base/typo-variables';
+@import 'src/styles/base/color';
 
 .cardContent {
   &.cardDone {
diff --git a/src/components/Challenge/challengeCardLast.scss b/src/components/Challenge/challengeCardLast.scss
index b74e69be70cb5314442ea74c54cfcb517b46ac3f..261e1bd0c3943cf0963800bd0ab74fb3c9c95790 100644
--- a/src/components/Challenge/challengeCardLast.scss
+++ b/src/components/Challenge/challengeCardLast.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/typo-variables';
-@import '../../styles/base/color';
+@import 'src/styles/base/typo-variables';
+@import 'src/styles/base/color';
 
 .cardLast {
   width: 100%;
diff --git a/src/components/Challenge/challengeCardLocked.scss b/src/components/Challenge/challengeCardLocked.scss
index 279b8f1acfdac4be950684ba27e303a0078009d4..df07cacadc4ab83b783913ca28f299e2578d5dbe 100644
--- a/src/components/Challenge/challengeCardLocked.scss
+++ b/src/components/Challenge/challengeCardLocked.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .cardLocked {
   filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));
diff --git a/src/components/Challenge/challengeCardOnGoing.scss b/src/components/Challenge/challengeCardOnGoing.scss
index b992883cae5e9ca96bb56edb8add1b9288eebe3c..7c00250c8078cc0077acb4a9ab0151b781e68a59 100644
--- a/src/components/Challenge/challengeCardOnGoing.scss
+++ b/src/components/Challenge/challengeCardOnGoing.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/typo-variables';
-@import '../../styles/base/color';
+@import 'src/styles/base/typo-variables';
+@import 'src/styles/base/color';
 
 .cardContent {
   background: transparent;
diff --git a/src/components/Challenge/challengeCardUnlocked.scss b/src/components/Challenge/challengeCardUnlocked.scss
index 5199a12c6059f7c75609e133af38e1198639bb55..8bfb434765f3c984b73688c66c7404f51adb41a1 100644
--- a/src/components/Challenge/challengeCardUnlocked.scss
+++ b/src/components/Challenge/challengeCardUnlocked.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .modal-overlay {
   width: 100%;
diff --git a/src/components/Challenge/challengeNoFluidModal.scss b/src/components/Challenge/challengeNoFluidModal.scss
index e956f006f55cc12f10ff93987397e9ec987738fd..01b40b1757680f8a4f4ecf4f5bcdd2fe6c5ec132 100644
--- a/src/components/Challenge/challengeNoFluidModal.scss
+++ b/src/components/Challenge/challengeNoFluidModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/typo-variables';
+@import 'src/styles/base/typo-variables';
 
 .noFluidModal {
   padding: 1rem;
diff --git a/src/components/Challenge/challengeView.scss b/src/components/Challenge/challengeView.scss
index debbf935567cf6fa048cd62cf955bb21163922ea..f603c9148f031625f56ccec47458cbec0275e291 100644
--- a/src/components/Challenge/challengeView.scss
+++ b/src/components/Challenge/challengeView.scss
@@ -1,7 +1,7 @@
-@import '../../styles/base/breakpoint';
-@import '../../styles/base/typo-variables';
-@import '../../styles/base/color';
-@import '../../styles/base/z-index';
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/typo-variables';
+@import 'src/styles/base/color';
+@import 'src/styles/base/z-index';
 
 .challengeSlider {
   position: relative;
diff --git a/src/components/Connection/deleteGRDFAccountModal.scss b/src/components/Connection/deleteGRDFAccountModal.scss
index be8f7158ed857f66f5ddbdc5549aa64e364c4b45..aafc248d0f1e42c872a9726d4401f4de802ed8c9 100644
--- a/src/components/Connection/deleteGRDFAccountModal.scss
+++ b/src/components/Connection/deleteGRDFAccountModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .delete-grdf-modal {
   .icon-main {
diff --git a/src/components/Connection/expiredConsentModal.scss b/src/components/Connection/expiredConsentModal.scss
index 1c67d8684f3e1987194936bc92ba0cc272df55e3..c98e678e88aee9d88611af579fc0f3cfcfab04fc 100644
--- a/src/components/Connection/expiredConsentModal.scss
+++ b/src/components/Connection/expiredConsentModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .expired-consent-modal {
   .icon-main {
diff --git a/src/components/CustomPopup/customPopupModal.scss b/src/components/CustomPopup/customPopupModal.scss
index c780b1363d19185ad268e008180db4042f348e52..d0b9c013d1771554a0f0a10dc030c2c803424d1e 100644
--- a/src/components/CustomPopup/customPopupModal.scss
+++ b/src/components/CustomPopup/customPopupModal.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/typo-variables';
-@import '../../styles/base/color';
+@import 'src/styles/base/typo-variables';
+@import 'src/styles/base/color';
 
 .customPopupRoot {
   border: 1px solid $gold-euro;
diff --git a/src/components/DateNavigator/datenavigator.scss b/src/components/DateNavigator/datenavigator.scss
index 8751ba7e3204f9be5c43a90dedf0ca587f77a16f..101639886b6f06d89edd528592c346d33e32ee3a 100644
--- a/src/components/DateNavigator/datenavigator.scss
+++ b/src/components/DateNavigator/datenavigator.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .date-navigator {
   display: flex;
diff --git a/src/components/DateNavigator/datenavigatorformat.scss b/src/components/DateNavigator/datenavigatorformat.scss
index e964a71685463124326cc49aed07041b4b130125..b8dddbc5cb60e5be15a7f51609328d6eabe156f3 100644
--- a/src/components/DateNavigator/datenavigatorformat.scss
+++ b/src/components/DateNavigator/datenavigatorformat.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .date-navigator-format {
   display: flex;
diff --git a/src/components/Duel/duelChart.scss b/src/components/Duel/duelChart.scss
index 459de5914467eb9afd79a0154100b896ceefd453..481fd7e81d7ca1809f4740dd23ccb2ef5b054ec9 100644
--- a/src/components/Duel/duelChart.scss
+++ b/src/components/Duel/duelChart.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .chart-root {
   margin-bottom: 1rem;
diff --git a/src/components/Duel/duelEmptyValueModal.scss b/src/components/Duel/duelEmptyValueModal.scss
index e0b34f0ec3f3592799701877b2745ce04043594f..1c515d4f2ced42d3491f45fc09b40843fdbf763f 100644
--- a/src/components/Duel/duelEmptyValueModal.scss
+++ b/src/components/Duel/duelEmptyValueModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .modal-empty-value-root {
   display: flex;
diff --git a/src/components/Duel/duelError.scss b/src/components/Duel/duelError.scss
index 870895cd6a79ccdebd718fccd9ea835bd5d6c5c0..b51f25abb394f5c3a0289d844872621613b5f13b 100644
--- a/src/components/Duel/duelError.scss
+++ b/src/components/Duel/duelError.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .duel-error-container {
   display: flex;
diff --git a/src/components/Duel/duelOngoing.scss b/src/components/Duel/duelOngoing.scss
index 5ac9623f753e25d3962a885299f3843bb43411cf..27de1c0bfe3b85505e63a744e64b7d1ebbc0a43c 100644
--- a/src/components/Duel/duelOngoing.scss
+++ b/src/components/Duel/duelOngoing.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .duel-ongoing-container {
   display: flex;
diff --git a/src/components/Duel/duelUnlocked.scss b/src/components/Duel/duelUnlocked.scss
index 9f8d8899537a2d682affd398c963c5e67d9c9780..a7a72ad803bc2bd2584c2ee865c954d14d4cf10a 100644
--- a/src/components/Duel/duelUnlocked.scss
+++ b/src/components/Duel/duelUnlocked.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .duel-unlocked-container {
   display: flex;
diff --git a/src/components/Duel/lastDuelModal.scss b/src/components/Duel/lastDuelModal.scss
index dcd32cb494061695845daf6986f9f69eefb09aa6..05a14432af96c886a876407a8e54f65b0d6f4c60 100644
--- a/src/components/Duel/lastDuelModal.scss
+++ b/src/components/Duel/lastDuelModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .duel-last-modal-root {
   text-align: center;
diff --git a/src/components/Ecogesture/ecogestureEmptyList.scss b/src/components/Ecogesture/ecogestureEmptyList.scss
index a072890654d9629babe8c4a94abbf687ef71efda..746d17b55f3de5c55a80ee82117a6843da3d17ab 100644
--- a/src/components/Ecogesture/ecogestureEmptyList.scss
+++ b/src/components/Ecogesture/ecogestureEmptyList.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .ec-empty-container {
   margin-top: 6rem;
diff --git a/src/components/Ecogesture/ecogestureInitModal.scss b/src/components/Ecogesture/ecogestureInitModal.scss
index 3088fd8fd08b7122aed896d9cdf995fa8697b16e..efd0bae96c26e4628ece63e6452634005ad9be31 100644
--- a/src/components/Ecogesture/ecogestureInitModal.scss
+++ b/src/components/Ecogesture/ecogestureInitModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .eg-init-modal {
   color: $grey-bright;
diff --git a/src/components/Ecogesture/ecogestureReinitModal.scss b/src/components/Ecogesture/ecogestureReinitModal.scss
index 01939fe7946009a67ee1dd35755ebca3c87bd958..5abb4e16a82c810101f570129d11d60611df53dc 100644
--- a/src/components/Ecogesture/ecogestureReinitModal.scss
+++ b/src/components/Ecogesture/ecogestureReinitModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .eg-reinit-modal {
   display: flex;
diff --git a/src/components/Ecogesture/singleEcogesture.scss b/src/components/Ecogesture/singleEcogesture.scss
index b786284ef7596ec96dd706da128f14e44cc863dc..862a5d2909a10e6b7e3a57412e3abf82fcb908ee 100644
--- a/src/components/Ecogesture/singleEcogesture.scss
+++ b/src/components/Ecogesture/singleEcogesture.scss
@@ -1,5 +1,4 @@
 @import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
 
 .single-ecogesture {
   color: $grey-bright;
diff --git a/src/components/EcogestureForm/ecogestureFormEquipment.scss b/src/components/EcogestureForm/ecogestureFormEquipment.scss
index 43fb2428905e3fbb448b1a4ff157159086d16fdb..be3e7257d2ffe9ba87153d315305cb90aba38294 100644
--- a/src/components/EcogestureForm/ecogestureFormEquipment.scss
+++ b/src/components/EcogestureForm/ecogestureFormEquipment.scss
@@ -1,5 +1,5 @@
 @import 'src/styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/breakpoint';
 
 .equipment-form-container {
   padding: 1.5rem;
diff --git a/src/components/EcogestureForm/ecogestureFormSingleChoice.scss b/src/components/EcogestureForm/ecogestureFormSingleChoice.scss
index 93360c88ec8200a01d7e2fda89432abb2d3510f4..a8181829fad052cd50e12727aaac40431323ba3f 100644
--- a/src/components/EcogestureForm/ecogestureFormSingleChoice.scss
+++ b/src/components/EcogestureForm/ecogestureFormSingleChoice.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .ecogesture-profile-container {
   display: flex;
diff --git a/src/components/EcogestureForm/ecogestureLaunchFormModal.scss b/src/components/EcogestureForm/ecogestureLaunchFormModal.scss
index c3e52eacfedfa0f7bf5c243b2e164dfaaadb8c9e..283ead71a2a4533f761d1001fbc010309fba75d3 100644
--- a/src/components/EcogestureForm/ecogestureLaunchFormModal.scss
+++ b/src/components/EcogestureForm/ecogestureLaunchFormModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .eg-init-modal {
   color: $grey-bright;
diff --git a/src/components/EcogestureSelection/ecogestureSelection.scss b/src/components/EcogestureSelection/ecogestureSelection.scss
index f0cdb6b56558ffa4a3af3bc8b8f3e14cca392588..08a03001ffa0d5e46b21df7012b8f3bb23d8a3ba 100644
--- a/src/components/EcogestureSelection/ecogestureSelection.scss
+++ b/src/components/EcogestureSelection/ecogestureSelection.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .eg-selection-header {
   color: $grey-bright;
diff --git a/src/components/EcogestureSelection/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
index 7f860e0385f0fe9b0b55f00a37b17c486349ae82..89e0f95a468fc735897f391ee49e630b3762f319 100644
--- a/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .eg-selection-detail-container {
   min-height: inherit;
diff --git a/src/components/EcogestureSelection/ecogestureSelectionEnd.scss b/src/components/EcogestureSelection/ecogestureSelectionEnd.scss
index 803a4b3aded9e9120c63c703f13e11cefde0c142..8a3cd1a42d0c3c4c44e66ca6ebc894e191e994dc 100644
--- a/src/components/EcogestureSelection/ecogestureSelectionEnd.scss
+++ b/src/components/EcogestureSelection/ecogestureSelectionEnd.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .eg-selection-end-container {
   position: relative;
diff --git a/src/components/EcogestureSelection/ecogestureSelectionModal.scss b/src/components/EcogestureSelection/ecogestureSelectionModal.scss
index 99a08d67a118b774f5573f524763b6b34c06f7a2..9093e9a2497a2e1420a808428b21956843c4d44a 100644
--- a/src/components/EcogestureSelection/ecogestureSelectionModal.scss
+++ b/src/components/EcogestureSelection/ecogestureSelectionModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .eg-selection-modal {
   color: $grey-bright;
diff --git a/src/components/EcogestureSelection/ecogestureSelectionRestart.scss b/src/components/EcogestureSelection/ecogestureSelectionRestart.scss
index 08c2885b01e7b35bcdb1d02bd7da499631e44a65..a68688b03d27a6335741cc82cddc71c6cb65c4ad 100644
--- a/src/components/EcogestureSelection/ecogestureSelectionRestart.scss
+++ b/src/components/EcogestureSelection/ecogestureSelectionRestart.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .eg-selection-restart-container {
   position: relative;
diff --git a/src/components/Exploration/explorationError.scss b/src/components/Exploration/explorationError.scss
index 9c747d83a044c9cb1c9fe7975d78348b059ba188..119d190c47f3abb5eedbd5d52d6aec464719bfb7 100644
--- a/src/components/Exploration/explorationError.scss
+++ b/src/components/Exploration/explorationError.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .exploration-error-container {
   display: flex;
diff --git a/src/components/Exploration/explorationFinished.scss b/src/components/Exploration/explorationFinished.scss
index b9110a27750cbd096ec0b1a42ace2718736c33a0..17fed8e73a2f30b6179471b75a27311b12783e9a 100644
--- a/src/components/Exploration/explorationFinished.scss
+++ b/src/components/Exploration/explorationFinished.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .exploration-card {
   display: flex;
diff --git a/src/components/Exploration/explorationOngoing.scss b/src/components/Exploration/explorationOngoing.scss
index 81ebd1521a1d8db3531a78809ec51586a8e08fb9..69589be0633223c28c43bf9ba002f7af234e1c0c 100644
--- a/src/components/Exploration/explorationOngoing.scss
+++ b/src/components/Exploration/explorationOngoing.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .exploration-container {
   display: flex;
diff --git a/src/components/FormGlobal/formNavigation.scss b/src/components/FormGlobal/formNavigation.scss
index 827eb3c93414073fa34204a33e3a0984fd155d53..92c4c331090d526d53c4e9d77dfdd01a41c16be4 100644
--- a/src/components/FormGlobal/formNavigation.scss
+++ b/src/components/FormGlobal/formNavigation.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .profile-navigation {
   border-top: 1px solid $grey-dark;
diff --git a/src/components/FormGlobal/formProgress.scss b/src/components/FormGlobal/formProgress.scss
index d14628b00b61b1a07769ddd104ad634db475a383..dd1f500a85c283e899f54be9a04d1b5963755057 100644
--- a/src/components/FormGlobal/formProgress.scss
+++ b/src/components/FormGlobal/formProgress.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .profile-type-progress {
   display: flex;
diff --git a/src/components/Home/ReleaseNotesModal.scss b/src/components/Home/ReleaseNotesModal.scss
index 83ac0850d4ca6d9abdfe26064eaa0510a6959282..f17f44f76eeb3adfffd53071990a0b848bae921c 100644
--- a/src/components/Home/ReleaseNotesModal.scss
+++ b/src/components/Home/ReleaseNotesModal.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .release-root.black {
   .modal-overlay {
diff --git a/src/components/PartnerIssue/partnerIssueModal.scss b/src/components/PartnerIssue/partnerIssueModal.scss
index 5ffa04a87f5eaae4394bdc6494905d9474423426..7ddf1e1b2ed045a8d36a1997fcb6f55dd16fe7c1 100644
--- a/src/components/PartnerIssue/partnerIssueModal.scss
+++ b/src/components/PartnerIssue/partnerIssueModal.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/typo-variables';
-@import '../../styles/base/color';
+@import 'src/styles/base/typo-variables';
+@import 'src/styles/base/color';
 
 .partnerIssueModal {
   padding: 1rem;
diff --git a/src/components/ProfileType/profileTypeFinished.scss b/src/components/ProfileType/profileTypeFinished.scss
index 9aa4e25053e8ac82478b106f00d38bacff39eece..7e0d427a6bb9836df23a6d854719557266099055 100644
--- a/src/components/ProfileType/profileTypeFinished.scss
+++ b/src/components/ProfileType/profileTypeFinished.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .profile-type-finished-card {
   margin: auto;
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index 221115bfee9549b15a6c18108b33551f41b9bcdf..8812beebb8a54ccfd5a1f6103e8208641769cf4e 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -1,6 +1,6 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
-@import '../../styles/base/typo-variables';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/typo-variables';
 
 .profile-form-container {
   color: $white;
diff --git a/src/components/Quiz/quizBegin.scss b/src/components/Quiz/quizBegin.scss
index c1b59893cf0acceefa0ad75f1234e1c279f36fed..9cc1e32b4d4daca6c952f351aed7d25c646d2d4f 100644
--- a/src/components/Quiz/quizBegin.scss
+++ b/src/components/Quiz/quizBegin.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .quiz-container {
   display: flex;
diff --git a/src/components/Quiz/quizExplanationModal.scss b/src/components/Quiz/quizExplanationModal.scss
index a5ad24d164c2b604e5379b75dfe47f81d8c9d5b6..da5a20eb20aa9718fd2751e521842983a1679750 100644
--- a/src/components/Quiz/quizExplanationModal.scss
+++ b/src/components/Quiz/quizExplanationModal.scss
@@ -1,4 +1,4 @@
-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .quiz-modal-root {
   display: flex;
diff --git a/src/components/Quiz/quizFinish.scss b/src/components/Quiz/quizFinish.scss
index 288da76b5e2f4fa7c32a9467eea698f95c7fa143..c6b6e6ab7faa10cacf3d587701d0d4fa06d3f49f 100644
--- a/src/components/Quiz/quizFinish.scss
+++ b/src/components/Quiz/quizFinish.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .quiz-finish-container {
   padding: 1.5rem;
diff --git a/src/components/Quiz/quizQuestion.scss b/src/components/Quiz/quizQuestion.scss
index d0a3baa006a6430ba9946f10c5fec7b60b2de1c0..72faed6cb7909fdd1762eb6d53f0cccdf68806ae 100644
--- a/src/components/Quiz/quizQuestion.scss
+++ b/src/components/Quiz/quizQuestion.scss
@@ -1,5 +1,5 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .quiz-container {
   .question-container {
diff --git a/src/components/TimeStepSelector/timeStepSelector.scss b/src/components/TimeStepSelector/timeStepSelector.scss
index f5bba5f0717ea98fcde74da3a81a0410e90d3c46..b041802de637920000fea84f9275c41134e18341 100644
--- a/src/components/TimeStepSelector/timeStepSelector.scss
+++ b/src/components/TimeStepSelector/timeStepSelector.scss
@@ -1,6 +1,6 @@
-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
-@import '../../styles/base/mixins';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/mixins';
 
 .timestep-selector {
   display: flex;
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 63369debd4a3f418c3b063be15c330ce58711b52..688abe38d86d2d8e3e76df9400246a5ca30cd1bb 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -1,6 +1,6 @@
 @import 'color';
-@import '../base/breakpoint';
-@import '../base/z-index';
+@import 'breakpoint';
+@import 'z-index';
 
 html {
   background: $dark-light-2;