2

I'm building a static site project using Gatsby. I've successfully installed the gatsby sass plugin and got sass to work, however, I could not get my custom sass variable file to properly imported into other component sass files.

Below is my folder structure:

`--src
  -components
   -header
    -header.js
    -header.sass
 --layouts
  -index.js
  -index.sass
 --pages
  -page1.js
  -page1.sass
 --sass
  -_color.sass
  -_global.sass
  -_mixins.sass
  `

As shown above, I use custom 'sass' folder to store all the global variables and styles, and then import them to each of the component sass that needs them (I understand this might not be an conventional approach, but i'm still new to react and gatsby, and not quite familiar with other methods such as component css just yet). For example, if I need to access the color variables inside the 'page1.sass', i'd import the color sass file into page1.sass, and define the specific component style there. The problem is that in doing so, I am getting the "Undefined variable" error. I checked my import path and everything seems to be correct, i couldnt figure it out what went wrong. The strangest thing is that importing mixins seem to be working fine. This problem seems to be unique with importing sass variables. am I missing something here?

York Wang
  • 1,909
  • 5
  • 15
  • 27
  • I found this question while trying to import the value of a Sass variable into a Gatsby component to conditionally do stuff with - perhaps it should be renamed to more closely match the problem described, something like 'Import sass variables into second Sass file referenced in gatsby component'? – Timmah Apr 06 '23 at 03:15
  • @Timmah Thanks for the suggestion! the title has been renamed. – York Wang Apr 07 '23 at 04:07

1 Answers1

1

You should use .scss instead of .sass

There are some issues with sass so using .scss will solve your problem

CountD
  • 45
  • 1
  • 7
  • Thank you, but could you elaborate a little bit? I want to understand the issue so I know why I should avoid using .sass instead. – York Wang May 03 '18 at 22:33
  • Hey! I Got it working now with .sass. You have to install plugin: npm install --save gatsby-plugin-postcss-sass Also, don't make mistakes with selectors in sass because it screams on smallest mistakes – CountD May 04 '18 at 16:33