1

我使用 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 颜色,但会保留那个空变量。

4

1 回答 1

0

您正在使用 WordPress 过滤器 add_filter('less_vars', 'my_less_vars', 10, 2); 添加较少的变量。

我正在使用 Netbeans,我确信它在 PhpStorm 中是一样的。Netbeans 编译器不能使用 WP 过滤器,就这么简单。你不能使用 PhpStorm 编译器来编译,除非所有的变量都写在 less 文件中。

One solution is to compile file using WP-LESS only when you have some changes in less files or variables (which will be changed after you change some theme option related to it).

Hope this helps :)

于 2016-10-12T14:36:08.150 回答