Less.js не отвечает в Chrome

Функциональность Less.js в Firefox, но не отвечающая на запросы в Chrome, вызвала обеспокоенность. Чтобы определить причину, давайте рассмотрим предоставленный код:

@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%;
}

Похоже, что этот код реализует Less.js с допустимым синтаксисом препроцессора CSS. Однако виновата среда и используемые настройки. Согласно предоставленной документации:

Ограничения скриптов браузера Less.js в Chrome

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

Это означает, что Less.js может не работать в Chrome при использовании локальных файлов, а не локальных. веб-сервер.

Решение

Чтобы решить проблему, попробуйте следующее:

• Отправляйте файлы с помощью веб-сервера: Загрузите файлы на веб-сервер и получите к ним доступ по URL-адресу (например, http://example.com/style.less).
• Используйте настройку локального хоста: Запустите локальный сервер разработки (например, встроенный сервер PHP, SimpleHTTPServer Python) и получать доступ к своим файлам по адресу, например http://localhost:8000/style.less.
• Рассмотрите альтернативы: Используйте инструмент обработки Less.js, например grunt или gulp, для компиляции файлов Less во время разработки, обеспечивая их совместимость с Chrome.