我使用 Redux 框架创建 wp 主题,WP-Less 用于在 LESS 中编译样式。在 PhpStorm 工作。
现在,我想从 Redux 动态更改一些颜色并将它们传递给我的主 style.less 文件,该文件将在 style.css 中编译。
问题是,当我想加载我的 CSS 时,我需要使用
wp_enqueue_style('my-style', get_stylesheet_uri());
但它只加载css,而不是我的less文件。在我的functions.php 文件中,我定义了我的变量。
add_filter('less_vars', 'my_less_vars', 10, 2);
功能 my_less_vars($vars, $handle) {
Redux::init('redux_qmakeup');
global $redux_qmakeup;
if (isset($redux_qmakeup['opt-typography']['font-family'])) {
$font_name = $redux_qmakeup['opt-typography']['font-family'];
} else {
$font_name = 'Montserrat';
}
if (isset($redux_qmakeup['opt-typography']['color'])) {
$font_color = $redux_qmakeup['opt-typography']['color'];
} else {
$font_color = '#d6451e';
}
if (isset($redux_qmakeup['opt-color-footer'])) {
$footer_color = $redux_qmakeup['opt-color-footer'];
} else {
$footer_color = '#414243';
}
// $handle is a reference to the handle used with wp_enqueue_style()
$vars["font-family"] = "'$font_name'";
$vars["font-color"] = "$font_color";
$vars["footer-color"] = "$footer_color";
return $vars; }
在 WP-LESS 文档中它说现在我可以在我的 .less 文件中使用 @footer-color 并且 PhpStorm 会自动编译它。但它不会,因为我的@footer-color 没有定义,所以编译被破坏了。如果我将它定义为一个空变量,它不会采用我的 redux 颜色,但会保留那个空变量。