SCSS Undefined variable: "$general-grey" 但是这个变量实际定义了并且不同

Question

我对此很陌生，我的任务是将我们网站使用的 Roots Sage 主题更新到最新版本。现在，转换过程本身并不难，但是，当将 header 导入新主题文件夹并使用 yarn run build 编译时，我收到此错误：

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                            12:29:21

error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed:
      color: $general_grey;
            ^
      Undefined variable: "$general-grey".
      in /home/html/devel/website-folder/wp-content/themes/website-theme/resources/assets/styles/layouts/_header.scss (line 33, column 14)

如您所见，第 33 行第 14 列有一个未定义的变量，名为 $general-grey。但是，这是不正确的，因为该变量是在 _variables.scss 文件中定义的，并通过 @import "common/variables"; 导入到 main.scss 文件中。

这些是在 _variables.scss 中定义颜色变量的行：

$theme-colors: (
  primary: #525ddc,
  brand_primary: #00add3,
  brand_darken: #0083a0,
  general_grey: #3d3d3d,
  overlay_text: #fff,
  std_black: #000,
  breadcrumb: #bababa,
  arancione: #f7941d,
  arancione_hover: #ab6614,
  verde: #90dd00,
  azzurro: #50c9e2,
  color-donne: #da6b93,
  grey_strong: #abbdc9
);

这是我尝试使用 general_grey 变量的 _header.scss 文件：

.green_number {
      font-family: $font-family-sans-serif;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      color: $general_grey;
      margin: 0;

      a {
        color: $general_grey;
      }

      .fa-phone,
      .green {
        color: $verde;
      }
    }

在 _variables.scss 和 _header.scss 中它被称为 $general_grey 带有 下划线 ，而 ERROR 在第 33 行表示未定义的变量，第 14 列是 $general-grey，带有 破折号 。

可能是因为我经验不足，但我真的无法解决这个问题。什么可能导致此错误？

提前感谢您的提示！ :)

Answer 1

看到错误在变量名中显示连字符而不是下划线。

$general-grey 与 $general_grey;

不同

不能直接从主题图中选择颜色。
检查 mixins 在 SCSS 中的工作方式并定义一个以选择您想要的颜色。

Answer 2

$theme-colors 是一个 Advanced Variable Functions。因此，要访问 general_grey 变量，您必须使用以下内容：

color: map.get($theme-colors, "general_grey");

SCSS Undefined variable: "$general-grey" 但是这个变量实际定义了并且不同

SCSS Undefined variable: "$general-grey" but the variable is actually defined and different

css

sass

roots-sage

yarnpkg