1

I'm pretty new to this and I was tasked to update the Roots Sage Theme we use for our website to the latest version. Now, the conversion process isn't hard itself, however, when importing the header into the new theme folder and compiling with yarn run build I get this error: 

 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)

As you can see, it says there is an undefined variable at line 33, column 14 called $general-grey. However, that is incorrect, as the variable is defined in a _variables.scss file and imported through @import "common/variables"; in the main.scss file.

These are the lines where the color variables are defined in _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
);

And this is the _header.scss file where I try to use the general_grey variable:

.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;
      }
    }

In both _variables.scss and _header.scss it's called $general_grey with an underscore, while the ERROR says the undefined variable in line 33, column 14 is $general-grey with a dash.

Probably due to my inexperience, but I can't really get through this. What could possibly cause this error?

Thank you in advance for the tips! :)

Samuel Lelièvre
  • 3,212
  • 1
  • 14
  • 27
sergio_petriccioli
  • 13
  • 1
  • 3

1 Answers1

1

$theme-colors is an Advanced Variable Functions. So to access to general_grey variable you will have to use the following:

color: map.get($theme-colors, "general_grey");
johannchopin
  • 13,720
  • 10
  • 55
  • 101
  • The syntax you suggested me didn't seem to work. However, from that point I tried ti just write ' color: $theme-colors, "general_grey"; ' and it worked just fine! So thank you very much! :D – sergio_petriccioli Mar 31 '20 at 13:03