My styles are not being applied from my sass file

May 2, 2023

I recently started contributing to this large codebase which uses modules.scss files to style. I followed the same way other components were written and imported my styles file exactly how they imported others but for some reason the styles are not being applied.

// RegistrattionOverview.modules.scss

@use 'src/styles/colors' as colors;

.activeTab {
    color: colors.$primary;
    background-color: colors.$charcoal;
}

.inactiveTab {
    color: colors.$alto;
    background-color: colors.$black;
}

And then I use it like this:

//RegistrattionOverview.jsx

import styles from './RegistrattionOverview.modules.scss';


<div
  className={currentTab === overviewTabs.REGISTRATIONS ? styles.activeTab : styles.inactiveTab)}
  onClick={() => setCurrent(overviewTabs.REGISTRATIONS)}
 >
    {t('seriesOverview.registrations')}
 </div>

Checking the devtools on chrome the styles are not even being applied at all. I have hard reloaded several time it still doesn’t work. Does anyone one know what else I can do?

I expect for the tabs to change colour depending on their state.

>Solution :

You may need to stop the server, close the current tab where the project is running, restart your dev server and then open the project in another tab. If it doesn’t work then maybe also post your colors config file.