SassError：未定义的变量：“ $ main-background-color”

时间：2020-02-22 17:01:20

标签： javascript css reactjs sass

我正在尝试在LoginPage组件样式化过程中使用CSS变量，但收到以下错误： SassError: Undefined variable: "$main-background-color". 此错误出现在_styles.scss文件中。

这是我的项目结构：

project structure

我正在将_variables.scss和styles.scss都导入到主index.scss文件中：

index.scss

导入变量时我做错了什么？ 为什么我不能在_styles.scss文件中使用它们？

2 个答案:

答案 0 :(得分：3)

我相信，如果您想在_variables.scss中使用它们，则需要直接将它们导入到_styles.scss中。

答案 1 :(得分：1)

$main-background-color是您的css变量（如在自定义属性中一样）还是您将其定义为Sass变量？

如果它是实际的CSS变量/自定义属性，则需要像这样使用它：var(--main-background-color)，作为全局变量，需要在:root {}或任何其他顶级元素（如{{ 1}}或<body>。

如果它是Sass变量，则需要确保要尝试编译哪个文件。您无法自行编译<html>，它必须是_styles.scss，并且需要确保编译器不会首先尝试编译模块（以index.scss开头的文件）因为这当然会失败。

_命令基本上只是将所有内容复制到一起，因此将其加载到多个位置会多次添加。 Sass模块通过继承@import命令来避免这种情况，但这仅在Dart Sass中受支持，而LibSass不支持。

相关问题
最新问题