我是rails的新手,当我通过添加
添加引导程序时,我正在学习本教程https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1#css_preprocessors@import "bootstrap-sprockets"
@import "bootstrap"
在application.css.sass
的最底部,一切都很好。但是,我有一行代码
html, body{background:#000;color:#FFF;}
没有得到尊重。环顾四周之后,我意识到这是因为我的申请文件:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*= require custom
*/
@import "bootstrap-sprockets"
@import "bootstrap"
我明白,因为" bootstrap"在最底层,这是网站使用的CSS,但是,如果我将它移动到顶部或任何其他位置,我会得到一个错误页面。我有另一种导入引导程序的方法,还是让我覆盖页面?
答案 0 :(得分:1)
我引用https://github.com/rails/sprockets#the-require_self-directive
require_self指令
require_self 告诉Sprockets在任何后续的require指令之前插入当前源文件的 。
这意味着如果你的require_self然后导入bootstrap,因为CSS代表级联样式表,将始终应用最后一种样式加上 css特异性的规则。 请阅读以下链接中的css特异性 http://cssspecificity.com/
您可以尝试设置!important来测试问题是否已解决。另一种方法是将css或scss代码建议包含在单独的文件中:
*= require_tree .
*= require_self
*= require custom
*/
@import "bootstrap-sprockets"
@import "bootstrap"
@import "my-css-style"
如果您仍有疑问,请检查如何在localhost:3000 / assets / application.css.scss中加载application.css.scss以查看如何在一个文件中加载不同的样式表,然后在chrome上使用debug / firefox,禁用所有样式,直到找出哪一个覆盖。