全栈工程师成长记

编程重新定义人生

stylesheets下面的.css文件有更高优先权

制作JD Store项目的时候,从安装bootstrap到制作common文件再到新增welcome controller,一切看起来都很顺利,然而在浏览器里显示页面的时候,navbar、body、footer无法正确显示出css样式,整个排版非常怪异。

重新检查各个步骤,bundle install没有问题,各个heml页面的代码也没有问题,application.scss也已引入bootstrap-sprocekts和bootstrap两个模组。

经过排查发现app/assets/stylesheets文件夹里除了application.scss文件,还有一个application.css文件,原本是用

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
对application.css重命名为application.scss的,结果我是用了

cp app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

这样就会同时存在application.css和application.scss两个文件,网站在读取stylesheets里面的文件的时候,会优先读取.css文件,所以导致真正起作用的.scss文件无法被执行。

删除application.css文件之后,网页的css样式就可以正常显示了。

HTML