Shared class from other file scss won't work nextjs

[zackfalcon]

Hello, when i actually, create a class in module file for an X component and call the use the class in used in a child component module style it wont work actually, it's like if the class doesn't exist Actually it works on react , why doesn't work it on my project my next config is only this :!

`const withImages = require('next-images');

module.exports = withImages();
`

A real exemple here :

my WeekendTitle.module.scss :
As you can see .card-load is present in an upper module scss and also in used in an upper component it wont actually work :x

`@import '../../../styles/common/all_common';

$transition-time: 0.6s;

.card-title-main {
  padding-left: 15px;
  padding-top: 15px;
}

.card-title-main h2 {
  max-width: 220px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 700;
  font-size: 22px;
  font-family: "visby", "helvetica", "sans-serif";
  text-align: left !important;
}

.card-title-main h2:hover {
  color: unset;
}

.card-title-main p {
  font-size: 16px;
  font-weight: 600;
  font-family: "source sans pro", "helvetica", "sans-serif";
  margin: 0;
  display: flex;
  align-items: center;
}

.card-title-main--mobile {
  position: absolute;
  top: -280px;
}

.card-load[data-state="loaded"] {
  .card-title-main {
    h2,
    img {
      visibility: visible;
    }
    p {
      visibility: visible;
      color: $gray-4;
    }
  }
  .card-title-main--mobile h2,
  .card-title-main--mobile p {
    color: $white;
  }
  .card-title-flag--load {
    display: none;
  }
  .card-title-flag--loaded {
    display: block;
  }
}

`
Thanks Again !

[zackfalcon]

Here is an example :

Code : https://image.noelshack.com/fichiers/2020/19/4/1588871230-capture-d-ecran-de-2020-05-07-12-31-02.png

Result : https://www.noelshack.com/2020-19-4-1588871235-capture-d-ecran-de-2020-05-07-12-31-07.png