Как начать настройку Bootstrap 3 с помощью LESS?

Изменение: 14 января 2015 г.

Использование глотка

1. Убедитесь, что у вас установлен узел с nodejs.org

   1.1: Собственный /usr/local, чтобы вы могли запускать команды npm без sudo:

   sudo chown -R `whoami` /usr/local

2. Установить gulp глобально: npm install gulp -g

3. Создайте папку на рабочем столе и перейдите в нее: cd ~/Desktop && mkdir boot-gulp && cd $_.
4. Запустите манифест проекта: npm init и примите значения по умолчанию.
5. Установите gulp и gulp-less: npm install gulp gulp-less.
6. Создайте файл с именем gulpfile.js и вставьте в него следующее:

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");

gulp.task("less", function() {
   gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
});

7. Установите Bower глобально: npm install bower -g
8. Установите загрузчик с помощью Bower: bower install bootstrap
9. Создайте файл less/main.less и загрузите bootstrap.less:

less/main.less

@import "bower_components/bootstrap/less/bootstrap.less";
// overrides here
@primary: #000; 
// ...

10. Запустите gulp less, и вы должны увидеть результат в папке css.

Добавление часов

11. Добавьте плагин gulp-watch: npm install gulp-watch
12. Обновите gulpfile.js, чтобы просмотреть любой файл меньшего размера и автоматически скомпилировать в css:

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");
var watch = require("gulp-watch"); //+

gulp.task("less", function() {
  watch("less/**/*.less", function(){ //+
    gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
  }); //+
});

Теперь запустите gulp less. Сейчас просматривает все меньше файлов в папке less. Внесите изменения и сохраните любой файл в папке less, и вы должны автоматически увидеть результат в папке css.

ИЗМЕНЕНИЕ: 1 января 2014 г.

Попробуйте Koala. Он компилирует ваши файлы LESS в режиме реального времени. Это бесплатно и кроссплатформенно. Вы также можете просмотреть этот FAQ о компиляция Bootstrap с помощью Koala.

Исходный ответ

Я воспроизвел вашу проблему с упомянутым вами приложением. Я попробовал другое приложение, например crunch app, и оно работало нормально. Итак, с помощью crunch просто перетащите файл bootstrap.less в это приложение и нажмите кнопку crunch file в правом верхнем углу приложения. Затем он спросит вас, где сохранить его. Я лично использую инструмент командной строки assets-packager (npm install -g assets-packager). Я надеюсь, что это помогло.

Это одни из лучших руководств по Bootstrap 3 Less Workflow, которые я смог найти.

1. http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
2. http://bootstrap.lesscss.ru/less.html

И если вы хотите узнать меньше, вы можете перейти по этим ссылкам

1. http://lesscss.org (официальный сайт less)
2. http://groupdocs.com/blog/using-bootstrap-with-less-css-tutorial
3. http://designshack.net/articles/css/using-less-js-to-simplify-your-css3

Надеюсь это поможет.

если у вас есть php-сервер, просто установите lessphp:

lessphp

а затем добавьте это в свою первую строку:

<?php
    require "lessc.inc.php";
    $less = new lessc;
    $less->checkedCompile("stylesheet.less", "stylesheet.css");
?>

и все, что вам нужно сделать, это работать с вашим меньшим файлом, а php сделает все остальное =')