WP 4.5.3 – .less not compiling…

  • Resolved Chipleh

    (@chipleh)


    8 years, 7 months ago

    Hi,

    I’ve been trying every solution I know of to get .less files to compile with WP 4.5.3; I’ve tried most of the plug-ins(which are not compatible with WP 4.5.3) and I’ve tried the standard less.js method, however, each method returns the same console status: Less has finished and no sheets were loaded. However, if I load a .less file with:

    @color: rgb(255, 69, 69);

    body { color: @color; }

    body is not styled.

    If I then add to the of my less file:

    p{ color:blue; }

    the sheet is definitely loaded and p is styled to blue. So the sheet is loaded, but the vars are not compiled.

    Has anyone successfully compiled .less with WP 4.5.3?

    Thanks for any help.
    ~Chipleh

Viewing 4 replies - 1 through 4 (of 4 total)

  • WordPress itself does not do any LESS compiling. Are you using a plugin to handle this, or your own code?

    Thread Starter Chipleh

    (@chipleh)

    Hey man,

    Thanks for your reply, and understood on WordPress not compiling LESS on its own; I was attempting to use many different plug-ins to compile LESS(the top 8 returns when searching for LESS under Plug-ins>new), with no success… no variables are compiled, but static css is displayed after loading LESS. Have you had any success with compiling LESS in 4.5.3 with any plug-in? If so, would ya help a brother out and share your method?

    Cheers to you Jake.

    I don’t have much experience with compiling LESS server side. I’ve done it using Grunt (https://gruntjs.com) or with a Package for my text editor (eg. https://packagecontrol.io/packages/LESS-build).

    To get it working server-side, I’d suggest picking a plugin based on it’s feature-set or UI or whatever looks easiest to use. And then when/if it doesn’t work, try diagnosing the problem with the developer of that particular plugin.

    Thread Starter Chipleh

    (@chipleh)

    So, I just worked out a solution, in case it helps anyone that was encountering the same issues I was having: it’s not server-side, but works for any DOM…
    —

    loadLESS.js:

    function loadLESS ( filename ) {
    // If LESS isn’t available, do nothing
    if ( !window.less ) {
    //console.log(“LESS isn’t available”);
    return;
    }
    // Create LESS link and add to <head>
    //console.log(“LESS IS available”);
    var link = jQuery(“<link type=’text/css’ rel=’stylesheet/less’ />”);
    link.attr(“href”, filename);
    jQuery(“head”).append( link );
    // Notify LESS that there is a new stylesheet
    less.sheets.push( link[0] );
    less.refresh();
    }
    loadLESS(“/wp-content/themes/yourTheme/test.less”);

    (ref: https://blog.blakesimpson.co.uk/read/44-dynamically-append-less-js-stylesheets)

    In functions.php, enqueue less.js, along with that .js file:

    function theme_enqueue_styles() {

    wp_enqueue_script(‘less’, get_stylesheet_directory_uri() .’/js/less.js’, array(‘jquery’), null, false);

    }

    function loadLESS_js(){
    wp_enqueue_script(‘loadLESS_js-script’, get_stylesheet_directory_uri() . ‘/js/loadLESS.js’, array( ‘jquery’ ));
    }
    add_action( ‘wp_enqueue_scripts’, ‘loadLESS_js’ );

    With all that, .less is now compiling nicely in WordPress. Again, it’s not server-side; for deployment I’ll be pre-compiling the .less files, but for development, this is a way to go, since I can’t make any of the less plug-ins play nicely with WP 4.5.3.

    Cheers, and thanks for your feedback, Jake.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘WP 4.5.3 – .less not compiling…’ is closed to new replies.