less.js не работает в хроме

Я заметил, что less.js работает в Firefox, но не в Chrome, или это потому, что я сделал ошибку?

<link rel="stylesheet/less" href="css/style.less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}

даже если я попробую html { background: red; }, он все равно не работает в хроме, я где-то ошибаюсь?


google-chrome css less
person Jiew Meng    schedule 21.06.2010    source источник
comment
Разве ваш CSS не должен быть в тегах ‹style›, даже если less.js будет с ним возиться?   -  person Ben Everard    schedule 21.06.2010
comment
нет, это ссылка на css или (файл .less) less информация .js   -  person Jiew Meng    schedule 21.06.2010
comment
Я проверил ваш код как в Firefox, так и в Chrome, и в том, и в другом он работает; единственное, что я заметил, в Chrome ваш фоновый градиент инвертирован. Какие версии вы используете?   -  person codeporn    schedule 21.06.2010
comment
о да, у меня тоже была такая проблема, потому что я неправильно понял синтаксис, ты должен использовать background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));   -  person Jiew Meng    schedule 21.06.2010
comment
На заметку для всех, кто попал сюда: я получил ту же ошибку на веб-сервере моего веб-хоста. Он ошибочно отправлял пустые ответы, потому что .less тип файла/MIME был неизвестен. Настройка веб-сервера для правильного обслуживания файлов .less исправила это. (Это не был междоменный запрос, все .js/.less файлы были отправлены из одной папки.)   -  person Joel Purra    schedule 24.06.2012
comment
связанный webmasters.stackexchange. ком/вопросы/50006/   -  person chharvey    schedule 03.07.2013

Ответы (8)


arrow_upward
62
arrow_downward

Из предоставленной вами ссылки: Сценарий браузера Less.js в настоящее время не будет работать, если вы используете Chrome и путь к вашей странице начинается с «file:///» из-за известной проблемы с Chrome. >

person Lithium    schedule 21.06.2010
comment
Очевидно, это влияет и на Safari 6.0 (8536.25). - person David M.; 05.08.2012
comment
Можно ли решить эту проблему с помощью --disable-web-security & --allow-file-access-from-files? РЕДАКТИРОВАТЬ: Неважно, попробовал с этими параметрами, и это работает. Фу ! Читать надо было на 2 строки ниже :))) - person lorddarq; 30.12.2012
comment
Этот ответ был бы лучше, если бы он включал хотя бы одно возможное решение проблемы! - person Romeo Sierra; 26.07.2017

arrow_upward
50
arrow_downward

Литий правильный, есть известная проблема Chrome с загрузкой локальных файлов javascript. Это «функция» безопасности в Chrome. Есть два обходных пути, о которых я знаю:

  1. Разрабатывайте свои локальные проекты с помощью веб-сервера. Вы можете очень легко установить и использовать Apache, хотя настройка требует некоторого терпения. Если вы работаете в Windows, вы можете установить IIS. При этом вместо двойного щелчка HTML-файла вы перейдете к нему с http://localhost/.

  2. Добавьте переключатель командной строки -allow-file-access-from-files в ярлык, и Chrome позволит вам без проблем загружать LESS.JS.

У меня возникает соблазн упомянуть об использовании другой версии конвертера less, например версии ruby ​​lessc, или одного из портов на PHP или .NET, но less.js более актуален, и я думаю, вам следует придерживаться его.

person Nathan Strutz    schedule 08.09.2011
comment
Амит — попробуйте superuser.com/questions/16750/ - person Nathan Strutz; 13.11.2011
comment
Самый простой известный мне способ запустить локальный веб-сервер — это выполнить команду python -m SimpleHTTPServer в корне вашего сайта. - person Ryan N; 13.06.2012
comment
Я тоже рекомендую использовать локальный веб-сервер. Попробуйте node.js и Подключение метода .static() библиотеки в качестве простого веб-сервера разработки для статических материалов для иметь возможность использовать less.js (и избегать любых других потенциальных file:/// странностей). - person Joel Purra; 24.06.2012
comment
да, добавление переключателя к ярлыку сработало: создайте новый ярлык в Windows, щелкните правой кнопкой мыши -> Свойства и установите для него цель: chrome.exe -allow-file-access-from-files, это было быстрое решение, но все же рекомендуется веб-сервер - person Mahesha999; 23.04.2014

arrow_upward
14
arrow_downward

На случай, если кому-то еще понадобится быстрое решение для Mac OS X (проверено на Lion)

"Пошаговое руководство для чайников"

Особое спасибо Lithium, Натан Штрутц + ребята из эта запись в Superuser

Создать AppleScript

Редактор сценариев Apple

с помощью следующей команды

do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome-allow-file-access-from-files"

AppleScript

Затем сохранить как приложение

сохранить как приложение

(Я поместил это в свою док-станцию ​​и добавил альтернативный значок Chrome для быстрого доступа)

добавить в док

ВАЖНО: Chrome необходимо закрыть, чтобы этот скрипт (приложение) работал.

person Community    schedule 04.02.2012
comment
Я продолжаю получать синтаксическую ошибку: ожидается «», но найден неизвестный токен. Любые идеи?? - person kthornbloom; 21.12.2012
comment
Обратная косая черта должна быть экранирована. Должно быть do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome -allow-file-access-from-files" - person Adam Stegman; 14.01.2013

arrow_upward
4
arrow_downward

На самом деле, вопреки принятому ответу, это работает нормально. Я использую Chrome 19, Mac OS X, контекст — это расширение Chrome. Я столкнулся с той же проблемой. Я начал экспериментировать с разными способами его включения, переключая текст в rel, type, href и так далее.

Это работает, ключ href="css/styles.css (используйте .css, а не .less):

<link rel="stylesheet/less" type="text/css" href="css/styles.css" />
<script src="libs/less-1.3.0.min.js" type="text/javascript"></script>

Стили хорошо применены, а консоль JavaScript в Chrome может сказать следующее (слегка урезанное для ясности):

less: parsed /css/styles.css successfully. less-1.3.0.min.js:8
less: css generated in 33ms

Я знаю, что нельзя использовать скомпилированную клиентскую часть CSS, но в контексте расширения Chrome нет другой альтернативы, кроме обычного CSS (eww). Вы также не можете запросить таблицу стилей с сервера, потому что клиент время от времени будет отключен.

person Michael Johansen    schedule 07.07.2012
comment
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 для меня. :( - person FRD; 18.03.2013
comment
Как вы получаете многословие из меньшего? - person Mbrevda; 02.12.2013
comment
Я получил многословие автоматически, когда Less был включен на стороне клиента. Возможно, он был удален в более поздней версии Less? (Не проверял.) - person Michael Johansen; 03.12.2013
comment
Да, у меня это тоже сработало, но компилируется не меньше. Как и где вы это получили - person AKS; 24.03.2014

arrow_upward
3
arrow_downward

Я рекомендую вам использовать скомпилированную версию файла LESS. Вы можете сделать это, например, в окнах с WinLess или SimpLESS.

Я использую винлесс. Он автоматически компилирует мои файлы .css, когда я сохраняю свой код.

Вам также необходимо запустить свой пример на веб-сервере, таком как IIS/tomcat/Jboss.

Я надеюсь, что это помогает

person Full-Stack Software Engineer    schedule 28.08.2012

arrow_upward
1
arrow_downward

Изменение тега ссылки на что-то вроде этого заставит его работать с любым браузером ТОЛЬКО, если вы не используете синтаксис Less в файле:

<link rel="stylesheet" type="text/less" href="css/styles.less" />

Так зачем вам использовать простой CSS в меньшем файле? Без понятия, но просто чтобы вы знали.

person Claudio Oliva    schedule 29.01.2014

arrow_upward
0
arrow_downward

Я нашел это маленькое приложение очень полезным, чтобы обойти проблему file://: Anvil для Mac. Одна минута, и он загружается и запускает столько сайтов, сколько вам нужно, через URL-адреса, такие как http://myapp.dev.

http://anvilformac.com/

person Joshua Muheim    schedule 13.10.2012

arrow_upward
0
arrow_downward

Если вы не хотите использовать -allow-file-access-from-files или запускать wamp, lamp и т. д., вы можете использовать это расширение, оно мне очень помогло. ссылка

person Davit Mkrtchyan    schedule 18.06.2019