From 9b1a9b301ca1b0fecbf99a8808674ffe6d0fec0c Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Tue, 22 Aug 2023 08:08:02 +0000
Subject: [PATCH] chore(webpack): make css imports absolute
---
app.config.react.js | 6 +-----
src/components/Action/actionBegin.scss | 4 ++--
src/components/Action/actionDone.scss | 4 ++--
src/components/Action/actionList.scss | 2 +-
src/components/Action/actionModal.scss | 2 +-
src/components/Action/actionOnGoing.scss | 2 +-
src/components/Analysis/analysisView.scss | 2 +-
src/components/Analysis/monthlyanalysis.scss | 4 ++--
src/components/Challenge/challengeCard.scss | 2 +-
src/components/Challenge/challengeCardDone.scss | 4 ++--
src/components/Challenge/challengeCardLast.scss | 4 ++--
src/components/Challenge/challengeCardLocked.scss | 2 +-
src/components/Challenge/challengeCardOnGoing.scss | 4 ++--
src/components/Challenge/challengeCardUnlocked.scss | 2 +-
src/components/Challenge/challengeNoFluidModal.scss | 2 +-
src/components/Challenge/challengeView.scss | 8 ++++----
src/components/Connection/deleteGRDFAccountModal.scss | 2 +-
src/components/Connection/expiredConsentModal.scss | 2 +-
src/components/CustomPopup/customPopupModal.scss | 4 ++--
src/components/DateNavigator/datenavigator.scss | 4 ++--
src/components/DateNavigator/datenavigatorformat.scss | 4 ++--
src/components/Duel/duelChart.scss | 4 ++--
src/components/Duel/duelEmptyValueModal.scss | 2 +-
src/components/Duel/duelError.scss | 2 +-
src/components/Duel/duelOngoing.scss | 4 ++--
src/components/Duel/duelUnlocked.scss | 2 +-
src/components/Duel/lastDuelModal.scss | 2 +-
src/components/Ecogesture/ecogestureEmptyList.scss | 4 ++--
src/components/Ecogesture/ecogestureInitModal.scss | 2 +-
src/components/Ecogesture/ecogestureReinitModal.scss | 2 +-
src/components/Ecogesture/singleEcogesture.scss | 1 -
.../EcogestureForm/ecogestureFormEquipment.scss | 2 +-
.../EcogestureForm/ecogestureFormSingleChoice.scss | 4 ++--
.../EcogestureForm/ecogestureLaunchFormModal.scss | 2 +-
.../EcogestureSelection/ecogestureSelection.scss | 4 ++--
.../EcogestureSelection/ecogestureSelectionDetail.scss | 4 ++--
.../EcogestureSelection/ecogestureSelectionEnd.scss | 4 ++--
.../EcogestureSelection/ecogestureSelectionModal.scss | 2 +-
.../EcogestureSelection/ecogestureSelectionRestart.scss | 4 ++--
src/components/Exploration/explorationError.scss | 2 +-
src/components/Exploration/explorationFinished.scss | 4 ++--
src/components/Exploration/explorationOngoing.scss | 4 ++--
src/components/FormGlobal/formNavigation.scss | 4 ++--
src/components/FormGlobal/formProgress.scss | 2 +-
src/components/Home/ReleaseNotesModal.scss | 4 ++--
src/components/PartnerIssue/partnerIssueModal.scss | 4 ++--
src/components/ProfileType/profileTypeFinished.scss | 4 ++--
src/components/ProfileType/profileTypeForm.scss | 6 +++---
src/components/Quiz/quizBegin.scss | 4 ++--
src/components/Quiz/quizExplanationModal.scss | 2 +-
src/components/Quiz/quizFinish.scss | 4 ++--
src/components/Quiz/quizQuestion.scss | 4 ++--
src/components/TimeStepSelector/timeStepSelector.scss | 6 +++---
src/styles/base/_layout.scss | 4 ++--
54 files changed, 87 insertions(+), 92 deletions(-)
diff --git a/app.config.react.js b/app.config.react.js
index 58047c1d2..7dba378a9 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 8acf26de8..06c170409 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 4a5de7d21..ce2f02bcf 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 4b4c65a2f..94faf983a 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 5b35affa4..ff9d610dd 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 c1f31851b..8aa859eb5 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 7022598c9..2b60ed6ff 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 0ebbf57f0..582e02943 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 8e07734cf..ac7c9ebca 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 c7eee6ea1..d4ff21eb9 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 b74e69be7..261e1bd0c 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 279b8f1ac..df07cacad 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 b992883ca..7c00250c8 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 5199a12c6..8bfb43476 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 e956f006f..01b40b175 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 debbf9355..f603c9148 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 be8f7158e..aafc248d0 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 1c67d8684..c98e678e8 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 c780b1363..d0b9c013d 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 8751ba7e3..101639886 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 e964a7168..b8dddbc5c 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 459de5914..481fd7e81 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 e0b34f0ec..1c515d4f2 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 870895cd6..b51f25abb 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 5ac9623f7..27de1c0bf 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 9f8d88995..a7a72ad80 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 dcd32cb49..05a14432a 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 a07289065..746d17b55 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 3088fd8fd..efd0bae96 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 01939fe79..5abb4e16a 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 b786284ef..862a5d290 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 43fb24289..be3e7257d 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 93360c88e..a8181829f 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 c3e52eacf..283ead71a 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 f0cdb6b56..08a03001f 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 7f860e038..89e0f95a4 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 803a4b3ad..8a3cd1a42 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 99a08d67a..9093e9a24 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 08c2885b0..a68688b03 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 9c747d83a..119d190c4 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 b9110a277..17fed8e73 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 81ebd1521..69589be06 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 827eb3c93..92c4c3310 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 d14628b00..dd1f500a8 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 83ac0850d..f17f44f76 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 5ffa04a87..7ddf1e1b2 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 9aa4e2505..7e0d427a6 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 221115bfe..8812beebb 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 c1b59893c..9cc1e32b4 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 a5ad24d16..da5a20eb2 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 288da76b5..c6b6e6ab7 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 d0a3baa00..72faed6cb 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 f5bba5f07..b041802de 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 63369debd..688abe38d 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;
--
GitLab