1

Play Framework 2.0.3 で CSS を使用する際にいくつかの問題があり、誰かが私が犯している間違いを見つけられるかどうか疑問に思っていました。

次のように定義された、siteview.scala.html というビューがあります。

@(name: String, records: List[Record])

@import helper._

@main(name) {
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/main.css")">
    </head> 
    <h1>@name</h1>

    <ul>
          ...
    </ul>
</html>
}

次のように定義された CSS ファイルがmain.lessありapp/assets/stylesheetsます。

h1 {color:#F6F9ED;}

@font-face {
    font-family: Gentium;
    src: url(fonts/GenBasR.ttf);
}
font-family: Gentium, Arial, Georgia;

ひどいスタイルで申し訳ありませんが、何かをしようと変更を続けました! アセットへのルートはデフォルトのままです。

Play は確実に CSS をコンパイルします。構文エラーがある場合は、それが発見されます。ただし、CSS は HTML に読み込まれていません。

CSS ファイルをパブリック フォルダーに直接コピーしようとしましたが、コンパイラから重複ファイル エラーが発生しました。これは、ファイルが適切な場所に配置されていることを示している可能性があります。

スタイリングを使用して HTML 表示を作成するにはどうすればよいですか? 明らかな何かが欠けていると感じていますが、Web開発にはまったく慣れていないため、アイデアがまったくありません。

4

2 に答える 2

6

デフォルトのアプローチは、開発者と Play の両方にとって混乱を招く可能性があると思うので、フォルダーの名前を に変更することをお勧めしますapp/assets/stylesheets(app/assets/lessまたは、一般的には、同じ名前のフォルダーがないことを確認してください/public)。これにより、パスの違いを確認できるため、LESS または静的アセットを使用していることを常に確認できます。

<!-- resolves to '/public/less/main.css' or (main.min.css) 
                                                   from app/assets/less folder -->
<link rel="stylesheet" type="text/css" 
                       href='@routes.Assets.at("less/main.min.css")'>

<!-- resolves to '/public/stylesheets/main.css' from 'public/stylesheets' folder -->
<link rel="stylesheet" type="text/css" 
                       href='@routes.Assets.at("stylesheets/main.css")'>

ルートは変更されません:

GET     /public/*file      controllers.Assets.at(path="/public", file)
于 2012-09-01T11:15:43.667 に答える