Play Framework 2.0.3中的CSS [英] CSS in Play Framework 2.0.3
问题描述
我在Play Framework 2.0.3中使用CSS时遇到了一些问题，并且想知道是否有人可以发现我所犯的错误。
I'm having some problems using CSS in Play Framework 2.0.3, and was wondering if anyone could spot the mistakes I am making.
我有一个视图称为siteview.scala.html，定义为：
I have a view called siteview.scala.html, defined as:
@(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 $
I have a CSS file defined as main.less in app/assets/stylesheets which looks like:
h1 {color:#F6F9ED;}
@font-face {
font-family: Gentium;
src: url(fonts/GenBasR.ttf);
}
font-family: Gentium, Arial, Georgia;
对于可怕的风格道歉，我不断改变尝试，让它做某事！到资产的路径已保留为默认路径。
Apologies for the terrible style, I kept changing to try and make it do something! The route to the assets has been left as the default.
Play肯定编译CSS;如果有语法错误，它被发现。然而，CSS只是没有加载到HTML。
Play definitely compiles the CSS; if there is a syntax error, it is spotted. However, the CSS is just not being loaded into the HTML.
我试图将CSS文件复制到公共文件夹，但是这给我一个重复的文件错误从编译器，这可能表明文件被放在右边
I tried copying the CSS file right into the public folder, but that gave me a duplicate file error from the compiler, which probably indicates the file is being put in the right place.
如何使用样式显示HTML？我有一种感觉，我缺少一些相当明显的东西，但是对于web开发来说是相当新的，所以我的想法太多了。
How do I make the HTML display with styling? I have a feeling I am missing something quite obvious, but am quite new to web development so I'm quite out of ideas.
推荐答案
p>我认为默认方法可能会混淆：开发人员和Play，所以我建议重命名文件夹 app / assets / stylesheets 到 app / assets / less （或者其他的东西，一般来说，你没有在 / public 中有相同名称的文件夹）。感谢这样，你可以始终确保你使用LESS或静态资产，因为你只是可以看到路径的差异：
I think that default approach can be confusing for both: developer and Play, so I'd suggest renaming the folder app/assets/stylesheets to app/assets/less (or something else, in general make sure, you haven't the folder with the same name in /public). Thanks to this you can be always sure that you're using LESS or static asset, as you just can see the difference in paths:
<!-- 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)
这篇关于Play Framework 2.0.3中的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
