SCSS file not including @used file's classes when imported in React component

user_3988503 0
Viewed 82

I'm having an odd issue where I have two classes and a styling library (installed via npm) that aren't including properly.

The first file is my main.scss, and then I have a page.scss file that I use specifically in my page.js component, and a styling library. I also have fonts.scss and variables.scss

The top of my main.scss looks like this:

@charset "utf-8";
@use "~styling-library/styling-library";
@use "fonts";
@use "variables" as *;

This seems to be working fine, as my fonts and styling-library are being included correctly, even on my page.js which doesn't directly reference it.

I have this written art the top of page.scss:

@use "main";
@use "variables" as *;

I have this statement written at the top of page.js:

import * as styles from '../styles/page.scss';

And then I have a component, for example that looks like this:

<section className=`{styles.classFromLibrary} {styles.classFromMainStylesheet`>

Interestingly, classFromLibrary loads fine even though, as I stated before, it is not directly referenced from my page.scss. But styles.classFromMainStylesheet comes up undefined. Why would that be the case? Do I need to do something to make it so the classes in the main stylesheet are accessible?

reactjs sass
1 Answers

As is typical, I figured out what was wrong directly after answering. It turns out everything is imported, but the classnames are different than I assumed. I figured that it would automatically assume camel-case indicated something was hyphenated. Apparently not, and I have to figure out how to configure that manually.

user_39885030
Related