• I’m migrating a node.js-powered HTML site to WordPress – it uses both Bootstrap and LESS. I found a snippet online for enabling Bootstrap and the outputted CSS via functions.php:

    function theme_add_bootstrap() {
    	wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/third_party/bootstrap/css/bootstrap.min.css' );
    	wp_enqueue_style( 'style-css', get_template_directory_uri() . '/css/custom.css' );
    	wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/third_party/bootstrap/js/bootstrap.min.js', array(), '3.0.0', true );
    }

    However, this only accounts for the final CSS file that’s outputted by my LESS pre-compiler, which is a pain because I can’t see my style changes locally (using MAMP) unless I compile the CSS.

    I would like to have the CSS file used in production, and the LESS file used when I’m developing locally. I attempted to do this by adding the following functions underneath the Bootstrap function above:

    function less_enqueue_scripts() {
        $current_user = wp_get_current_user();
        if ( $current_user--->ID == '1' )
            wp_enqueue_script( 'lesscss', get_stylesheet_directory_uri() . '/third_party/less-1.5.0.min.js' );
    }
    
    add_action( 'wp_enqueue_scripts', 'less_enqueue_scripts' );
    
    function less_filter_stylesheet_uri( $stylesheet_uri, $stylesheet_dir_uri ) {
        $current_user = wp_get_current_user();
        if ( $current_user--->ID == '1' )
            $src = $stylesheet_dir_uri . '/css/custom.less';
        else
            $src = $stylesheet_dir_uri . '/css/custom.css';
        return $src;
    }
    
    add_filter( 'stylesheet_uri', 'less_filter_stylesheet_uri', 10, 2 );

    But it’s causing the site to break. I’m not sure if it’s because the second statement in the Bootstrap function is interfering with these functions, or if another issue is the culprit. Would appreciate any insights.

Viewing 1 replies (of 1 total)
  • Will a browser parse a Less source file as a stylesheet? I’m not familiar with Less (I prefer Sass, myself) so maybe it works differently, but if I pass a Sass source file as a stylesheet, the browser ignores the rules, even the ones that don’t involve things like mixins.

    As for your issue: Do you get any errors when you load your site? You may want to temporarily turn debugging on.

Viewing 1 replies (of 1 total)

The topic ‘Add LESS and Bootstrap support’ is closed to new replies.