0

今後のプロジェクトの出発点として、HTML5BP と Bootstrap2 (レスポンシブ オプション付き) を使い始めることにしました。そこで、ボイラープレート、Responsive Bootstrap 2、modernizr、respond、jQuery 開発、LESS、および IE クラスのオプションを選択して、Initializr パッケージをダウンロードしました。

圧縮されたパッケージの内容をクリーンな作業フォルダーに配置した後、すべてが期待どおりに進みました。また、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 はスタイルをロードしないようです.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.js を使用して LESS をブラウザー レベルで解釈します (すべてが機能します)。

<!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">

これにより「type」が追加され、正しい「rel」値が追加されました。そのため、initializrによって挿入されたコメントにエラーが発生しました。

于 2012-02-25T15:48:16.503 に答える