Как добавить Bootstrap и LESS на мой перенесенный сайт WordPress?

Я переношу сайт на WordPress – он использует как Bootstrap, так и LESS. Я нашел фрагмент онлайн для включения Bootstrap и выведенного CSS через 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 ); } 

Это успешно работало само по себе. Тем не менее, он учитывает только окончательный CSS, который выводится моим прекомпилером LESS, что является болью, потому что я не вижу локальные изменения стиля LESS (используя MAMP), если я сначала не скомпилирую CSS.

Я хотел бы иметь файл CSS, используемый в производстве, и файл LESS, используемый при локальном развитии. Я попытался сделать это, добавив следующие функции под функцией Bootstrap выше:

 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 ); 

Но это заставляет сайт сломаться. Я не уверен, что это связано с тем, что второй оператор функции Bootstrap вмешивается в эти функции, или если другая проблема является виновником. По достоинству оценят любые идеи.

Вам не нужно создавать дополнительные функции, просто повторно использовать то, что у вас уже есть, и немного настроить его:

 function theme_add_bootstrap() { wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/third_party/bootstrap/css/bootstrap.min.css' ); wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/third_party/bootstrap/js/bootstrap.min.js', array(), '3.0.0', true ); if (WP_ENV === 'development') { wp_enqueue_script( 'lesscss', get_stylesheet_directory_uri() . '/third_party/less-1.5.0.min.js' ); wp_enqueue_style( 'style-less', get_template_directory_uri() . '/css/custom.less' ); } else { wp_enqueue_style( 'style-css', get_template_directory_uri() . '/css/custom.css' ); } } 

После того, как у вас есть эта настройка, просто зайдите в свой wp-config.php на своей машине разработки и добавьте строку:

 define('WP_ENV', 'development'); 

Предполагая, что у вас нет этой строки в вашей wp-config.php тогда она должна использовать CSS вместо LESS.

Я адаптировал этот метод из темы Roots, которая использует тот же метод для чего-то подобного.