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! :)
$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");