chore(webpack): make css imports absolute

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'],
       },
     ],
   },

src/components/Action/actionBegin.scss

-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .action-begin {
   margin: auto;

src/components/Action/actionDone.scss

-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .action-done-container {
   max-width: 600px;

src/components/Action/actionList.scss

-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .action-list-container {
   display: flex;

src/components/Action/actionModal.scss

-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .action-modal {
   display: flex;

src/components/Action/actionOnGoing.scss

-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .action-ongoing {
   box-sizing: border-box;

src/components/Analysis/analysisView.scss

-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 .analysis-view-title {
   color: $grey-bright;
   text-align: center;

src/components/Analysis/monthlyanalysis.scss

-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .analysis-root {
   display: flex;

src/components/Challenge/challengeCard.scss

-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .slide {
   margin: 0 1rem 0 0;

src/components/Challenge/challengeCardDone.scss

-@import '../../styles/base/typo-variables';
-@import '../../styles/base/color';
+@import 'src/styles/base/typo-variables';
+@import 'src/styles/base/color';
 
 .cardContent {
   &.cardDone {

src/components/Challenge/challengeCardLast.scss

-@import '../../styles/base/typo-variables';
-@import '../../styles/base/color';
+@import 'src/styles/base/typo-variables';
+@import 'src/styles/base/color';
 
 .cardLast {
   width: 100%;

src/components/Challenge/challengeCardLocked.scss

-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .cardLocked {
   filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));

src/components/Challenge/challengeCardOnGoing.scss

-@import '../../styles/base/typo-variables';
-@import '../../styles/base/color';
+@import 'src/styles/base/typo-variables';
+@import 'src/styles/base/color';
 
 .cardContent {
   background: transparent;

src/components/Challenge/challengeCardUnlocked.scss

-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .modal-overlay {
   width: 100%;

src/components/Challenge/challengeNoFluidModal.scss

-@import '../../styles/base/typo-variables';
+@import 'src/styles/base/typo-variables';
 
 .noFluidModal {
   padding: 1rem;

src/components/Challenge/challengeView.scss

-@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;

src/components/Connection/deleteGRDFAccountModal.scss

-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .delete-grdf-modal {
   .icon-main {

src/components/Connection/expiredConsentModal.scss

-@import '../../styles/base/color';
+@import 'src/styles/base/color';
 
 .expired-consent-modal {
   .icon-main {

src/components/CustomPopup/customPopupModal.scss

-@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;

src/components/DateNavigator/datenavigator.scss

-@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
 
 .date-navigator {
   display: flex;