0

I'm refactoring some of my SCSS structure, and it seems my variables are giving me some trouble in my new React app. Variables are compiling as "unknown" in components when I try starting the app.

Here is some background on scss variables: https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498

And a related quesion: SASS - use variables across multiple files

Here's basically what my app looks like:

src/

  • App.js/App.scss

  • partials/

    • _breakpoints.scss
    • etc...

  • components/

    • content/

      • text.js/text.scss

App.scss

@import 'partials/breakpoints';
@import 'partials/otherStuff';

_breakpoints.scss

$lg: 992px;

text.scss

...
    @media screen and (max-width: $lg) { ... }
...

According to the docs from SCSS, if you define your variables first-thing in your main stylesheet, other components should be able to see the variables. So if that's the case, what could I be doing wrong here?

https://sass-lang.com/documentation/variables#scope

Variables declared at the top level of a stylesheet are global. This means that they can be accessed anywhere after they’ve been declared—even in another stylesheet!

Update: Is what I'm trying to do more of a mixin thing? As far as I know using mixins isn't needed for sharing variables across your website, unless I'm mistaken.

Matt Strom
  • 698
  • 1
  • 4
  • 23
  • How do you define $lg variable? – Tien Duong Aug 09 '19 at 02:54
  • updated my question. Essentially it's just a file with a couple variables. – Matt Strom Aug 09 '19 at 02:56
  • 1
    Try @import "./src/partials/breakpoints" – swapnil2993 Aug 09 '19 at 03:16
  • It does work if I import _breakpoints.scss into each file that needs it. Is this an issue with how React loads dependencies and components? Just for the record I don't use any additional libraries for building (like webpack, grunt, etc.) – Matt Strom Aug 09 '19 at 03:28
  • I don't think there is an issue with react here. I think that is how you import stuff from other files. `if you define your variables first-thing in your main stylesheet, other components should be able to see the variables` not sure where that is in the doc. – 10101010 Aug 11 '19 at 10:40
  • @10101010 I updated my question with a reference to the language docs. Also note this question for further reference: https://stackoverflow.com/questions/17598996/sass-use-variables-across-multiple-files – Matt Strom Aug 12 '19 at 05:43
  • I believe what it is trying to say is that those variables can be used globally if it is imported from another file. That statement in the doc is definitely misleading. – 10101010 Aug 12 '19 at 06:15
  • From what I see you import breakpoints.scss in App.scss file, but you use it(variables from breakpoints.scss) in text.scss. How does text.scss file looks like? Do you import App.scss or breakpoint.scss in that file as well? Or maybe you import text.scss in App.scss below 'partials/breakpoints' import? If not how does text.scss supposed to know about variables declared in 'breakpoints.scss'? – Michał Antczak Aug 12 '19 at 05:56
  • However, since React essentially builds pages through nested imports, this would still apply. `Index.js` includes `App.js`, which includes `App.scss`, as well as any child components used, such as a page template. The page includes it's own scss file, and includes any other components. This continues until the website is compiled. This is what I meant by how react loads it's dependencies, or compiles it's css source files. – Matt Strom Aug 12 '19 at 06:21
  • You wouldn't have to import if it was plain css. Since your code is in scss it has to be compiled to css. During compilation `$lg` is clearly undefined(as it is not defined or hasn't been imported) hence they are unknown. – 10101010 Aug 15 '19 at 04:02

0 Answers0