SassError：未定义变量：“$main-background-color”
Posted
技术标签:
【中文标题】SassError：未定义变量：“$main-background-color”【英文标题】：SassError: Undefined variable: "$main-background-color" 【发布时间】：2020-06-06 19:44:03 【问题描述】：我尝试在 LoginPage 组件样式期间使用 CSS 变量，但收到以下错误：
SassError: Undefined variable: "$main-background-color".
此错误出现在_styles.scss 文件中。
这是我的项目结构：
我将_variables.scss 和styles.scss 都导入到主index.scss 文件中：
导入变量时我做错了什么？
为什么我不能在_styles.scss 文件中使用它们？
【问题讨论】：
据我所知，文件的路径是错误的。应该是../general 【参考方案1】：如果你想在那里使用 _variables.scss，我相信你需要将它们直接导入到 _styles.scss 中
【讨论】：
【参考方案2】：$main-background-color 是您的 css 变量（如在自定义属性中）还是您将其定义为 Sass 变量？
如果它是一个实际的 css 变量/自定义属性，您需要像这样使用它：var(--main-background-color) 并且作为一个全局变量，它需要在 :root 或任何其他***元素（如 <body> 或 @987654325）中定义@。
如果它是一个 Sass 变量，你需要确定你正在尝试编译哪个文件。您不能单独编译_styles.scss，它必须是index.scss，并且您需要确保您的编译器不会首先尝试编译模块（以_ 开头的文件），因为这当然会失败.
@import 命令基本上只是将所有内容复制在一起，因此将其加载到多个位置会多次添加。 Sass 模块通过继承 @use 命令避免了这种情况，但这仅在 Dart Sass 中支持，而不在 LibSass 中支持。
【讨论】：
以上是关于SassError：未定义变量：“$main-background-color”的主要内容，如果未能解决你的问题，请参考以下文章
带有 vue 的故事书 - SassError：未定义的变量
使用 Angular 材质定义自定义主题时出现 SassError
SassError：@extend 类失败：tailwind vue 无法将多个 tailwind 类合并为一个自定义类
Devextreme React “SassError: $color: [object Object] 不是颜色。”发生错误