Twitter Bootstrap не работает с less.js - PullRequest
Новая
       28

Twitter Bootstrap не работает с less.js

16 голосов
/ 11 ноября 2011

Я разбил его на простейшую форму, но все еще не могу понять, почему это не работает.Все файлы разрешаются, и импорт в Bootstrap уже загружен, стили не загружены.

bootstrap 1.4.0 минус 1.1.3 

<html>
    <head>
        <title>ahhhhhh...</title>

        <link rel="stylesheet/less" href="/less/bootstrap/1.4.0/bootstrap.less">
        <script src="/less/less-1.1.3.min.js"></script>

    </head>
    <body>

        <h1>WTF!!!</h1>

    </body>
</html>

Я сделал простой style.less, которыйработает отлично!Я что-то упускаю из виду, очевидно?

Обновление:

style.less по запросу Тодда: 

@primary_color: green;

h1 {
    color: @primary_color;
}

Ответы [ 4 ]

6 голосов
/ 17 февраля 2012

Обновление 3/5/2012 : Ребята из Bootstrap исправили эту проблему в версии 2.0.2 Bootstrap (еще не выпущена). Смотрите этот коммит .

Основная ошибка в том, что текущая версия less.js не позволяет вам использовать переменную for для значения url () напрямую (например, url(@iconWhiteSpritePath)) - вместо этого вы должны использовать интерполяцию строк (например, url("@{iconWhiteSpritePath}")), что выполняет то же самое. Парни из начальной загрузки просто обновили свой синтаксис, чтобы учесть эту причуду.

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

Сегодня я столкнулся с точной проблемой и выяснил ее причину. Поскольку ваш стек на несколько версий раньше моего (я использую Bootstrap 2.0 и less.js 1.2.2), я не могу быть уверен, что это та же проблема, но, возможно, она связана.

В любом случае, проблема для меня заключалась в том, что Twitter Bootstrap определяет некоторые переменные: 

@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

И затем использовать их непосредственно в значении url () для фонового изображения в sprites.less: 

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url(@iconSpritePath);
  background-position: 14px 14px;
  background-repeat: no-repeat;

  .ie7-restore-right-whitespace();
}
.icon-white {
  background-image: url(@iconWhiteSpritePath);

}

Согласно обсуждению в этой проблеме Github , которая вызывает серьезную проблему. Когда less.js подавляет это значение, вся компиляция завершается неудачей.

Хорошая новость заключается в том, что в этой проблеме есть исправление, предоставленное csnover. Просто измените эту строку в tree.URL: 

    if (typeof(window) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {

до 

    if (typeof(window) !== 'undefined' && typeof(val.value) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {

и вы должны быть установлены. Другими словами, мы просто гарантируем, что val.value установлен так, чтобы charAt () не подавился неопределенным.

Надеемся, что это исправление скоро будет добавлено в проект, и Bootstrap будет работать с less.js в среде браузера из коробки.

2 голосов
/ 15 ноября 2011

Если вы разрабатываете это локально, убедитесь, что браузер использует правильный протокол.В адресной строке должно отображаться http: , а не file: .

На моей машине с Windows 7, использующей Chrome (с настройкой XAMPP), у меня былота же проблема CSS с использованием less.js с Bootstrap при доступе к файлу .html по адресу: 

file:///C:/xampp/htdocs/index.html

Тем не менее, он правильно отображался через http: 

http://localhost/index.html

Не знаю почему, ноЯ полагаю, что less.js использует HTTP-заголовки.

1 голос
/ 23 февраля 2012

у меня сработало 

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url(../img/glyphicons-halflings.png);
  background-position: 14px 14px;
  background-repeat: no-repeat;

  .ie7-restore-right-whitespace();
}
.icon-white {
  background-image: url(../img/glyphicons-halflings-white.png);
}

, поэтому замените 

url(@iconSpritePath);

на 

url(../img/glyphicons-halflings.png);

на less.js v1.2.1 и Bootstrap v2.0.1

0 голосов
/ 15 ноября 2011

Это проблема с вашей файловой структурой?/less/bootstrap/1.4.0/bootstrap.less будет указывать на корень вашего домена независимо от вашего HTML-файла.

Если вы используете хостинг с Apache и у вас следующая структура проекта: 

www/
    your project/
        less/
        index.html
    another project/
    others/

При доступе к индексу.html из http://localhost, он найдет файл less из корневого домена , который www/.Таким образом, поскольку папка less не находится в этом корневом каталоге, она будет возвращена как 404 (не найдена).

Таким образом, решение состоит в том, чтобы использовать относительный URL для меньшего количества файлов.Если у вас есть вышеуказанная структура, удалите «/» и используйте вместо нее less/bootstrap/1.4.0/bootstrap.less.

...