Подтвердить что ты не робот

Как начать с настройки Bootstrap 3 с LESS?

Я только что загрузил Bootstrap 3 из https://github.com/twbs/bootstrap. Я смотрю этот учебник: http://www.youtube.com/watch?v=I6EPArp4csA. Как я могу начать с изменения файлов LESS?

То, что я сделал, это скопировать эти каталоги: LESS, dist/css dist/fonts dist/js и создать мой новый проект. Текущая папка проекта выглядит следующим образом:

css
less
js
index.html

с файлом HTML, имеющим это вверху:

<link rel="stylesheet/less" type="text/css" href="less/my_site.less"/> //only contains @import "bootstrap.less";
<script src="js/less.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

Теперь, когда я пытаюсь изменить одну из переменных в переменных .less и скомпилировать ее с помощью SimpLESS, возникает ошибка синтаксиса: carousel.less. Что дает? Когда я комментирую "carousel.less", появляется другая проблема с dropdown.less. Так что, возможно, это что-то связано с миксинами? У кого-нибудь есть идея о том, как я начинаю двигаться дальше?

4b9b3361

ОТВЕТЫ

Ответ 1

Редактировать: 14 января 2015 г.

Использование gulp

  • Убедитесь, что у вас есть node из nodejs.org

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

    sudo chown -R `whoami` /usr/local

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

  • Создайте папку на рабочем столе и перейдите к ней: cd ~/Desktop && mkdir boot-gulp && cd $_.
  • Инициировать манифест проекта: npm init и принять значения по умолчанию.
  • Установите gulp и gulp -less: npm install gulp gulp-less.
  • Сделайте файл с именем 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"));
});
  1. Установить глобальную привязку: npm install bower -g
  2. Установить бутстрап с беседкой: bower install bootstrap
  3. Сделайте файл less/main.less и загрузите bootstrap.less:

less/main.less

@import "bower_components/bootstrap/less/bootstrap.less";
// overrides here
@primary: #000; 
// ...
  1. Запустите gulp less, и вы увидите результат в папке css.

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

  1. Добавьте плагин gulp-watch: npm install gulp-watch
  2. Обновить 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.

EDIT: 1 января 2014 года

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

Оригинальный ответ

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

Ответ 2

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

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

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

Ответ 3

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

lessphp

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

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

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