React Typescript SassError Undefined variable.

I need some help on this please 🙏 I am new to using sass with react && typescript, so I declared a variable in a scss file but all I'm getting is an error that says Undefined variable
24 Replies
b1mind
b1mind2y ago
Whats the index.sass look like? Also you are importing index.sass not scss not sure why the switch. Make sure you use the same type as .sass has different syntax. would help to share the vars.scss too
Leke
Leke2y ago
The reason why i did that was to follow the The 7-1 Pattern
b1mind
b1mind2y ago
I'm not questioning the folder struct but more why you are using .sass on index not .scss they are different syntaxes
Leke
Leke2y ago
oh! i will change that now
b1mind
b1mind2y ago
Would help if you show their code too though .
Leke
Leke2y ago
This is what i have in the file
b1mind
b1mind2y ago
And the variable definition?
Leke
Leke2y ago
b1mind
b1mind2y ago
I'm still learning to use @use @forward better myself. Give ma few I'll look at it harder
Leke
Leke2y ago
ok
b1mind
b1mind2y ago
in your login.scss try @use ".../abstracts/variables" as *; when you use @use typically its going to take the name of the file and use it like variables.bg might be better to forward it 🤔
vince
vince2y ago
Wait why do you use use? I follow the 7-1 architecture pattern as well and I don't use use and my variables work just fine
vince
vince2y ago
This might help you (if you havent checked it out already): https://github.com/KittyGiraudel/sass-boilerplate
GitHub
GitHub - KittyGiraudel/sass-boilerplate: A boilerplate for Sass pro...
A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines. - GitHub - KittyGiraudel/sass-boilerplate: A boilerplate for Sass projects using the 7-1 architecture patter...
vince
vince2y ago
Can we see your index.scss file? Oh, I see. I use @import instead of use If you check out the boilerplate you'll see
vince
vince2y ago
Also, I'm writing a react app with scss right now so if you want to check it out and see how I did mine: https://github.com/vince1444/Listen-Party
GitHub
GitHub - vince1444/Listen-Party
Contribute to vince1444/Listen-Party development by creating an account on GitHub.
b1mind
b1mind2y ago
Import is deprecated You should be using forward and use.
vince
vince2y ago
Oh wow really? Okay, interesting the github for that isn't updated. She's pretty active too
vince
vince2y ago
vince
vince2y ago
https://sass-lang.com/ says only Dart Sass currently supports @use
Sass: Syntactically Awesome Style Sheets
Syntactically Awesome Style Sheets
b1mind
b1mind2y ago
dart sass is sass vs node-sass (which you shouldn't be using cause its deprecated too)
vince
vince2y ago
Interesting, it seems I don't use either... anyway back on topic 😂
b1mind
b1mind2y ago
This should be the fix just have not heard back
vince
vince2y ago
Okay cool, I'll keep this thread handy since I'll move over to use as well Thanks
Leke
Leke2y ago
@import is deprecated This solved my problem for me Great ..i will check it out ... thanks Yes i don't want to use node-sass