Question

如何在WordPress中运行CSS预处理器（LESS）？

我正试图在我的孩子主题中应用LESS。我创建variable.less并将其放在子主题文件夹css/less/variable.less中，我在我的style.css中调用此.less，如@import "variable.less"

标题中的

（子主题）

<link rel="stylesheet/less" href="/wp-content/themes/themename-child/css/less/variable.less" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>

但它不起作用。

我也试过了......但没有运气

function css_less(){
    wp_register_script('less-js', get_template_directory_uri() . '/js/less.js');
        wp_enqueue_script('less-js');
    wp_register_style('less-css', get_template_directory_uri(). '/css/less/variable.less');
        wp_enqueue_style('less-css');
}
add_action('wp_enqueue_scripts', 'css_less');

的style.css

.box-horizontal{ padding: 1em 2em 1em 2em; margin-top: -1em; text-align: center; border: 1px solid #CCC; box-shadow: @box-shadow; background: @bg-white; border-radius: 3px; }
.box-bg{ border: 1px solid #CCC; box-shadow: @box-shadow; background: #FFF; border-radius: 3px; text-align: center; }

链接：http://www.homecredit.ph/testEnvironment/mail-test/4830-2/

Answer 1

您是否安装了LESS编译器？你需要一个将LESS编译成CSS。

我大部分时间都使用https://wordpress.org/plugins/wp-less/，但还有一些插件可用。安装插件后，您可以在functions.php中将样式表排入队列，如下所示：

function eq_less()
{
    wp_enqueue_style('less-style', get_stylesheet_directory_uri() . '/style.less');
}

add_action('wp_enqueue_scripts', 'eq_less', 99);

请注意style.less的扩展名为.less而不是.css - 编译器会自动识别扩展名并为其生成一个css文件，该文件已入队。

少于在WordPress中工作

1 个答案: