在React的子组件中找不到SCSS变量

Question

我正在重构我的一些SCSS结构，看来我的变量给我的新React应用带来了麻烦。当我尝试启动应用程序时，变量在组件中被编译为“未知”。

以下是有关scss变量的背景知识：https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498

以及一个相关的问题：SASS - use variables across multiple files

这基本上是我的应用程序的样子：

src /

• App.js / App.scss

• 部分/

  • _breakpoints.scss
  • 等...

• 组件/

  • 内容/

    • text.js / text.scss

App.scss

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

_breakpoints.scss

$lg: 992px;

text.scss

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

根据SCSS中的文档，如果您首先在主样式表中定义变量，则其他组件也应该能够看到变量。所以如果是这样，我在这里怎么可能做错了？

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

  

在样式表的顶层声明的变量是全局变量。这意味着它们可以在声明之后的任何地方访问，甚至可以在另一个样式表中访问！

更新： 我正在尝试做更多的mixin吗？据我所知，除非您弄错了，否则不需要使用mixins在整个网站上共享变量。