我无法使用自定义css

时间:2017-02-11 00:30:33

标签: css ruby-on-rails twitter-bootstrap

我是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,但是,如果我将它移动到顶部或任何其他位置,我会得到一个错误页面。我有另一种导入引导程序的方法,还是让我覆盖页面?

1 个答案:

答案 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,禁用所有样式,直到找出哪一个覆盖。

enter image description here