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

Я разбил его на простую форму, но до сих пор не могу понять, почему это не работает. Все файлы разрешаются, а импорт в 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>

Я сделал простой стиль, который отлично работает! Я пропустил что-то очевидное?

Update:

style.less по просьбе Тодда:

@primary_color: green;

h1 {
    color: @primary_color;
}

Ответы

Ответ 1

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

Основная ошибка заключается в том, что настоящая версия less.js не позволяет вам использовать переменную для значения 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() не задыхался на undefined.

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

Ответ 2

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

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

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

Однако он правильно отображался через http по адресу:

http://localhost/index.html

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

Ответ 3

для меня работала

[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

Ответ 4

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

Если вы размещаете с помощью apache и у вас есть следующая структура проекта:

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

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

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