0

このページのHTMLコンテンツは次のとおりです。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="js/less-1.3.0.min.js" type="text/javascript"></script>
    <link rel="stylesheet/less" type="text/css" href="style.less" >    
</head>

Google Chromeでソースを開き、新しいタブで開いて、JavaScriptファイルが少なく、作成したスタイルシートが少ない場合は、コンテンツが表示されます。つまり、正しくリンクされています。

LESSスタイルが適用されないのはなぜですか？

編集：「file：///」の問題全体を回避するためにこれをWAMPから実行しても、スタイルは適用されません。

編集：

.lessファイルの内容：

html, body {
    margin:0;
    padding:0;
}

#headbg {
    height:497px;
    background-color:red;
}

#header-wrapper {
    width:980px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

#header-wrapper #left-container {
    float:left;
    position:relative;
    outline:1px solid cyan;    
}

#logo {
    margin-left:10px;
    display:block;
}

#logo-hue {
    position:absolute;
    top:20px;
}

#social {
    float:left;
    color:#fff;
}

#social .message {
    text-align:center;
}

#social .contact {
    text-align:center;
}

#header-wrapper #carusel-container {
    float:left;
    outline:1px solid cyan;
}

#bodybg {
    background-color:#fff;
}
4

2 に答える 2

2

スタイルシートの参照を他のどの参照よりも上に置きます。

<head>
    <link rel="stylesheet/less" type="text/css" href="style.less" >    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="js/less-1.3.0.min.js" type="text/javascript"></script>
</head>
于 2012-05-14T14:32:46.947 に答える
0

ライアンの答えは正しいです：しかし、JsとCssの理論では、ロードされるとすぐにJsが動作を開始するということは、呼び出される関数によって異なります。しかし、jsスクリプトが実行されているとき-cssはまだロードされていません。したがって、常にcssを最初にロードして、js（document.ready（）などのようにまっすぐに機能している場合）-必要なすべてのプロパティ、スタイルを使用できるようにします。

また、同じ理由で、プラグインを試す前に、まずjqueryファイルをインクルードする必要があります（使用している場合）。

それが役に立てば幸い

于 2012-05-14T14:43:53.057 に答える