SCSS未定义变量:“ $ general-grey”,但该变量实际上已定义且不同]]

问题描述 投票:1回答:2

我对此还很陌生,我受命将我们用于网站的Roots Sage主题更新为最新版本。现在,转换过程本身并不困难,但是,将标题导入新主题文件夹并使用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
);

这是_header.scss文件,我尝试在其中使用general_grey变量:

.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,而错误表明第33行中的未定义变量,第14列是带有破折号>]的$general-grey。] >

可能是由于我的经验不足,但我无法真正克服这个困难。可能导致此错误的原因是什么?

谢谢您的提示! :)

我对此还很陌生,我受命将我们用于网站的Roots Sage主题更新为最新版本。现在,转换过程本身并不困难,但是,在导入标头时...

$theme-colorsAdvanced Variable Functions。因此,要访问general_grey变量,您将必须使用以下代码:

color: map.get($theme-colors, "general_grey");
  1. 看到该错误在变量名称中显示连字符,而不是下划线。

$ general-grey

$ general_grey;]
  1. 您不能像这样从主题图中选择颜色。

  • 检查mixins如何在SCSS中工作,并定义一个以选择所需的颜色。

  • css sass yarnpkg sage
    2个回答
    1
    投票

    $theme-colorsAdvanced Variable Functions。因此,要访问general_grey变量,您将必须使用以下代码:


    0
    投票
    1. 看到该错误在变量名称中显示连字符,而不是下划线。
    © www.soinside.com 2019 - 2024. All rights reserved.