Я решил начать использовать HTML5BP и Bootstrap2 (с опцией отзывчивости) в качестве отправной точки для будущих проектов и подумал, что генератор пакетов Initializr.com - отличный способ заставить работать два предложения.Поэтому я скачал пакет Initializr, с выбранными параметрами шаблонов Responsive Bootstrap 2, modernizr, response, jQuery development, LESS и IE.
Все прошло как положено после помещения содержимого zip-пакета в чистую рабочую среду.папка.А при открытии файла index.html правильно отобразился ожидаемый шаблон «героя» в стиле Bootstrap.Это было здорово для локальной разработки, но я хотел иметь возможность скомпилировать файлы LESS локально и загрузить соответствующий файл CSS на свой сервер для производственного кода.
Введите SimpLESS / LESS.app и мой первый контрольно-пропускной пункт.
При использовании SimpLESS / LESS.app предполагается удалить из index.html следующие 2 строки (согласно комментариям в этом файле):
<link rel="stylesheet/less" href="less/style.less">
<script src="js/libs/less-1.2.1.min.js"></script>
и заменить их на:
<link rel="stylesheet/less" href="less/style.css">
Вот фактический комментарий из index.html:
<!-- Use SimpLESS (Win/Linux/Mac) or LESS.app (Mac) to compile your .less files
to style.css, and replace the 2 lines above by this one:
<link rel="stylesheet/less" href="less/style.css">
-->
Здесь я столкнулся с проблемой.Хотя SimpLESS правильно компилирует все файлы LESS и помещает результат в файл «style.css», в подкаталог «less», а вышеприведенные строки заменены на, Safari, похоже, не загружает Style.css.
Что я сделал не так?
Не следует также генерировать ошибку сценария:
file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js The requested URL was not found on this server.
Но ошибка возникает даже тогда, когда <script src="js/libs/less-1.2.1.min.js"></script> был использован для правильного отображения страницы.
РЕДАКТИРОВАТЬ: я думаю, это может быть полезно, если я включил HTML для index.html:)
Во-первых, LESS интерпретируется в браузереуровень, используя less.js (все работает):
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet/less" href="less/style.less">
<script src="js/libs/less-1.2.1.min.js"></script>
<!-- Use SimpLESS (Win/Linux/Mac) or LESS.app (Mac) to compile your .less files
to style.css, and replace the 2 lines above by this one:
<link rel="stylesheet/less" href="less/style.css">
-->
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div class="navbar navbar-fixed-top">
..... basic template content removed to save space ........
</div>
<div class="container">
..... basic template content removed to save space ........
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.js"><\/script>')</script>
<script src="js/libs/bootstrap/transition.js"></script>
<script src="js/libs/bootstrap/collapse.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Следующая ссылка на скомпилированный LESS файл "style.css", который никогда не загружается:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet/less" href="less/style.css">
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div class="navbar navbar-fixed-top">
..... basic template content removed to save space ........
</div>
<div class="container">
..... basic template content removed to save space ........
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.js"><\/script>')</script>
<script src="js/libs/bootstrap/transition.js"></script>
<script src="js/libs/bootstrap/collapse.js"></script>
<script src="js/script.js"></script>
</body>
</html>
ОБНОВЛЕНИЕ: найденоответ, опубликую, когда stackoverflow позволяет мне:)