2012-03-23 2 views
8

У меня есть простой файл style.less в моем проекте, и я использую bootstrap для чистого, отзывчивого дизайна. Так вот мы идем:нет компилятора удваивает все

@import "bootstrap/bootstrap.less"; 

@import "../css/jquery.vegas.css"; 
@import "../css/jquery.fancybox-1.3.4.css"; 

body { 
    padding-top: 60px; 
    padding-bottom: 40px; 
} 

@import "bootstrap/responsive.less"; 

Теперь, когда я скомпилировать файл с меньшими затратами, то CSS-вывода выглядит странно:

.container { 
    width: 940px; 
    margin-left: auto; 
    margin-right: auto; 
    *zoom: 1; 
    *zoom: 1; 
    width: 940px; 
    margin-left: auto; 
    margin-right: auto; 
    *zoom: 1; 
    *zoom: 1; 
} 

Он просто удваивая все! Я вижу это странное поведение даже в браузере сразу, когда я работаю над своим дебютным экземпляром.

Это так странно и ужасно, есть ли у кого-нибудь идея, почему это происходит? В исходных файлах, которые импортируются из бутстрапа, все определяется только один раз.

+0

Что такое «отзывчивый»? Некоторые компиляторы строят дублированные правила, а некоторые не ... – prodigitalson

+0

Какая версия LESS вы используете; какой компилятор и версия? Это важная информация, чтобы даже начать размышлять о том, что может быть вашей проблемой ... – sg3s

+0

К сожалению, версия меньше 1.2.0, и я запускаю ее с помощью хоста Windows-скриптов -> http://blog.dotsmart.net/2010/11/ 26/run-the-less-js-command-line-compiler-on-windows/ Содержимое «responsive.less» имеет некоторые другие импорты (variables.less, mixins.less) и множество медиа-запросов с типичный менее-код в нем, так что .. ничего особенного, и, насколько я вижу, нет дубликатов – jebbie

ответ

6

Вот два возможных решения. Они оба, кажется очевидным, но я внимания ОБА из них порой ...

  1. Вы видите повторяющиеся правила стиля в реальной скомпилированный файл CSS? Или вы видите повторяющиеся правила в Firebug или инструментах разработчика Chrome? Если это второй, вернитесь и убедитесь, что у вашего файла css есть дубликаты.

  2. У меня была такая же проблема дублирования при использовании LESS, и я не мог понять это, пока не понял, что дважды включил css в <head>. Это глупая ошибка, но я определенно сделал это раньше.

Удачи.

+4

Решенный! БОЛЬШОЕ спасибо Emerson :) Второе решение было точной проблемой в моем случае - импорт: @import "bootstrap/responsive.less "; содержит файлы« variables.less »и« mixins.less »снова - они уже включены в первый импорт« bootstrap.less »-.- Итак, я только что удалил эти импортные данные в responsive.less и теперь все выглядит нормально :) – jebbie

+0

Я рад помочь. Когда у вас есть шанс, вы должны пометить вопрос как решенный. – emersonthis

0

Убедитесь, что используете последнюю версию LESS.

поведение по умолчанию @import не имел обыкновение быть очень умным, если он был вызван несколько раз из разных файлов ..

Так директива @import-once была введена, чтобы убедиться, что конкретный менее файл был включен только один раз независимо от того, сколько файлов оно использовалось.

Однако они теперь сделали поведение @import-once по умолчанию, даже если вы просто используете @import.

См. Также: what is the LESS CSS statement @import-once good for?

Смежные вопросы