0

我决定开始使用 HTML5BP 和 Bootstrap2（带有响应选项）作为我未来项目的起点，并认为 Initializr.com 的包生成器是让这两个产品工作的好方法。所以我下载了 Initializr 包，其中选择了样板、响应式引导 2、modernizr、响应、jQuery 开发、LESS 和 IE 类选项。

将压缩包的内容放入干净的工作文件夹后，一切都按预期进行。并且打开 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 文件，并将结果放入“less”子目录中的“style.css”文件中，并且上面的行已替换为 ，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>已经用于正确显示页面，也会发生错误。

编辑：我想如果我包含 index.html 的 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允许我发布它:)

4

1 回答 1

1

好的，想通了。注释中包含的样式表链接代码是原因。实际的链接代码应该是：

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

这添加了“类型”并输入了正确的“rel”值。所以它最终成为initializr插入的评论中的错误。

于 2012-02-25T15:48:16.503 回答