新手问题 CSS 渲染效果失败的问题

ane · 2014年07月21日 · 最后由 ane 回复于 2014年07月22日 · 3210 次阅读

今天遇到这样的情况

在某个 htm.erb 中引入了一段 CSS 样式,

<link href="/stylesheets/dzporject/dz.css" rel="stylesheet" type="text/css" />

发布到测试环境 (nginx+unicorn) 发现,CSS 效果并没有渲染出来. 然后修改成

<%= stylesheet_link_tag "/stylesheets/dzporject/dz.css" %>

发现效果出来了。感觉两种写法对 nginx 来说应该是一样才对啊。为什么会有如此大的差异?

你看生成的页面源码一不一样?

http://guides.rubyonrails.org/asset_pipeline.html

#1 楼 @Rei 一样啊。stylesheet_link_tag 生产的是。好奇怪 bug

#1 楼 @Rei 会不会是因为我的 CSS 文件是单独写的,而不是按照 controller 的名字写的,所以如果直接以 HTML 的方式写的话,虽然能载入文件,但 erb 渲染不是很理想?

如果你是启动了 production 环境,那么正常情况静态文件应该经过编译,文件名带上指纹字符串。把一楼链接看一遍。

有可能是拼写错误。

#4 楼 @Rei 我觉得有个可能的原因是,前端是在已有 css 文件里添加的属性。然后如果 nginx 对缓存没有失效的话,可能就获取的是旧文件,而我改成 stylesheet_link_tag 的方式后,因为会在内容加密,所以缓存失效了。

来自 RubyChina4Android

请在浏览器打开: http://youhost.com/stylesheets/dzporject/dz.css 看看,文件不存在吧!

原因:

production 下面 Assets Pipeline 编译出来以后是直接放到 /assets/ 目录下面的,没有 stylesheets 了。在 production 环境下面,正确的位置应该是:

http://youhost.com/assets/dzporject/dz.css


另外话说你就没对比过直接写 link tag 和 stylesheet_link_tag 两者之间的差别?

#8 楼 @huacnlee 早上来公司,第一件事情就是去比对 “link tag 和 stylesheet_link_tag ” 的区别,发现确实如之前所料,一直获取的是以前的旧缓存。

#9 楼 @ane 浏览器缓存的问题?

#10 楼 @huacnlee 不是浏览器缓存,是 nginx 的。它这个 CSS 是前端直接写在单独的目录下的。

#11 楼 @ane 好吧,我还是建议你再看看 Assets Pipeline 的文档,正确使用它。你现在这些问题都是你自己搞出来的坑。

http://guides.ruby-china.org/asset_pipeline.html

Rails 经过多年的发展,沉淀出来现在这些功能,可以说每个功能都是有价值,有意义的。既然都在用 Rails 了,为何它提供的功能你不用,要自己写 link tag

#12 楼 @huacnlee 我也后悔没用 link tag。我就直接把他们给我的页面改成 erb.唉,吃一堑长一智

这种页面单独 CSS 是一个甜蜜的坑,一开始一般都是为了快速解决某个问题,尝到甜头后就继续,然后就越写越多,应用页面越来越多,不能复用的 selectors 也越来越多,最后就。。。好一点的结果是花相当多不必要的时间在 CSS 上,坏一点的结果是需求变更,想换一些风格,然后就。。嘭

#14 楼 @billy 尾大不掉?

需要 登录 后方可回复, 如果你还没有账号请 注册新账号