我尝试在 LoginPage 组件样式期间使用 CSS 变量，但收到以下错误：
SassError: Undefined variable: "$main-background-color".
此错误出现在_styles.scss 文件中。
这是我的项目结构：
我将_variables.scss 和styles.scss 都导入到主index.scss 文件中：
导入变量时我做错了什么？
为什么我不能在_styles.scss 文件中使用它们？
【问题讨论】：
标签： javascript css reactjs sass
如果你想在那里使用 _variables.scss，我相信你需要将它们直接导入到 _styles.scss 中
【讨论】：
$main-background-color 是您的 css 变量（如在自定义属性中）还是您将其定义为 Sass 变量？
如果它是一个实际的 css 变量/自定义属性，您需要像这样使用它：var(--main-background-color) 并且作为一个全局变量，它需要在 :root {} 或任何其他顶级元素（如 <body> 或 @987654325）中定义@。
如果它是一个 Sass 变量，你需要确定你正在尝试编译哪个文件。您不能单独编译_styles.scss，它必须是index.scss，并且您需要确保您的编译器不会首先尝试编译模块（以_ 开头的文件），因为这当然会失败.
@import 命令基本上只是将所有内容复制在一起，因此将其加载到多个位置会多次添加。 Sass 模块通过继承 @use 命令避免了这种情况，但这仅在 Dart Sass 中支持，而不在 LibSass 中支持。
【讨论】：