$theme-colors
是Advanced Variable Functions。因此,要访问general_grey
变量,您将必须使用以下代码:
我对此还很陌生,我受命将我们用于网站的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-colors
是Advanced Variable Functions。因此,要访问general_grey
变量,您将必须使用以下代码:
color: map.get($theme-colors, "general_grey");
$ general-grey
您不能像这样从主题图中选择颜色。
检查mixins如何在SCSS中工作,并定义一个以选择所需的颜色。
$theme-colors
是Advanced Variable Functions。因此,要访问general_grey
变量,您将必须使用以下代码: