less.js не работает в Chrome - PullRequest
Новая
       27

less.js не работает в Chrome

56 голосов
/ 21 июня 2010

Я заметил, что 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; }, он все равно не работает в Chrome, я где-то ошибаюсь?

Ответы [ 8 ]

62 голосов
/ 21 июня 2010

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

50 голосов
/ 08 сентября 2011

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

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

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

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

14 голосов
/ 04 февраля 2012

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

"Прохождение для чайников"

Special thx to Lithium , Nathan Strutz + ребята из этого поста на Superuser

Создание AppleScript

Apple Script Editor

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

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

AppleScript

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

save as Application

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

add to Dock

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

4 голосов
/ 08 июля 2012

На самом деле, вопреки принятому ответу, это работает нормально. Я на 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). Вы также не можете запросить таблицу стилей с сервера, потому что клиент будет время от времени находиться в автономном режиме.

3 голосов
/ 29 августа 2012

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

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

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

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

1 голос
/ 29 января 2014

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

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

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

0 голосов
/ 18 июня 2019

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

0 голосов
/ 13 октября 2012

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

http://anvilformac.com/

...