{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 做自己的国王 的问题《CSS in Play Framework 2.0.3》','https://www.manongdao.com/q-935645.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
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>
}
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 definitely compiles the CSS; if there is a syntax error, it is spotted. However, the CSS is just not being loaded into the HTML.
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.
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.
The solution provided by @biesor didn't work for me. I've added this line in routes file:
Then I've included the css file in my html page in this way:
I think that this isn't the best way to include a css file but I cannot find another solution.
I think that default approach can be confusing for both: developer and Play, so I'd suggest renaming the folder
app/assets/stylesheetstoapp/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:route stays untouched: