LESS not working in WordPress

时间:2016-04-07 作者:User014019

如何在WordPress中运行CSS预处理器(LESS)?

我正在尝试在我的孩子主题中应用更少的内容。我创建variable.less 并将其放置在子主题文件夹中css/less/variable.less 我称之为。在我的风格中更少。像这样的css@import "variable.less".

LESS不起作用,我尝试在头文件和函数中为LESS调用js文件。php,但没有一个是有效的。

我检查了控制台,有个错误../css/less/variable.less 404 (Not Found). 但文件就在那里。

我在头球尝试了这个。php(子主题)

<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\');
样式。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/

1 个回复
SO网友:Bryan Willis

我同意@Zlatev 你可能不想做这个客户端。有更简单的方法来包含更少的内容。

plugins 允许您这样做。即使是jetpack也有less support.

如果您的目标是将其包含在主题中,则可以使用wp-less.

Just download that plugin and drop in somewhere in your theme and include it in your functions.php like this:

require get_template_directory() . \'/inc/wp-less/bootstrap-for-theme.php\';

一零
function mytheme_enqueue_less_css() {
    wp_enqueue_style(\'official_flowershop-theme-style\', get_template_directory_uri().\'/css/less/theme.less\');
}   
add_action( \'wp_enqueue_scripts\', \'mytheme_enqueue_less_css\' );
The plugin has lots of extra features you can use (see full list here): 

function mytheme_less_setup() {

    define(\'WP_LESS_COMPILATION\', \'deep\');
    $less = WPLessPlugin::getInstance();
    $less->dispatch();

    // do stuff with its API like:
    $less->addVariable(\'bg_primary\', \'#A0D4A4\');
    $less->addVariable(\'bg_secondary\', \'#474747\');
    $less->addVariable(\'bg_light\', \'#f5f5f5\');
    $less->addVariable(\'bg_body\', \'#ffffff\');

    if (get_theme_mod(\'officialtheme_bg_primary\') != \'\' ) {
        $less_color = get_theme_mod("officialtheme_bg_primary");
        $less->addVariable("bg_primary", "$less_color");
    }

    if (get_theme_mod(\'officialtheme_bg_secondary\') != \'\' ) {
        $less_color = get_theme_mod("officialtheme_bg_secondary");
        $less->addVariable("bg_secondary", "$less_color");
    }

    if (get_theme_mod(\'officialtheme_bg_light\') != \'\' ) {
        $less_color = get_theme_mod("officialtheme_bg_light");
        $less->addVariable("bg_light", "$less_color");
    }

    if (get_theme_mod(\'officialtheme_bg_body\') != \'\' ) {
        $less_color = get_theme_mod("officialtheme_bg_body");
        $less->addVariable("bg_body", "$less_color");
    } // WP Less initialize and add variables

}
add_action( \'after_setup_theme\', \'mytheme_less_setup\' );
Caution:虽然在一个主题/插件中使用较少的或sass/scss,但据我所知,目前还没有任何可用的插件解决方案可以为css添加前缀。对我来说,这是一个交易破坏者,因为我可以在我的电脑上用像Prepros 或代码套件。

但是,如果您想轻松地使用prefix-free 虽然这是我们之前试图避免的,所以虽然这很容易,但不一定是一个很好的解决方案。