Bootstrap CSS加载bootstrap-sass,其他CSS不会加载
我正在使用Bootstrap for my Rails应用程序和bootstrap-sass v.3.1.1,它在我的application.css.scss文件中使用了以下内容:
@import "bootstrap";
没有别的。 就在今天,我尝试添加一些自己的CSS来添加一些我没有使用Bootstrap的样式。 这是我的欢迎视图/控制器,所以我把它添加到welcome.css.scss
.complete-class { text-decoration: line-through; }
通过阅读Rails指南的这一部分,我的理解是你可以在清单中包含一个像welcome.css.scss这样的CSS文件,如下所示:
@import "bootstrap"; /* *= require_self *= require_tree . */
这没有成功应用我的CSS; welcome.css.scss也没有出现在head标签中。
当我试图调试这个时,我遇到了一些奇怪的事情,我觉得我也应该指出:
1.导入引导程序时出错
VIM的Syntastic插件有助于指出错误:
File to import not found or unreadable: bootstrap. Load path: /home/stephen/code/blocitoff/app/assets/stylesheets
这很奇怪,因为
- a)之前没有出现过这个错误,尽管我没有更改它引用的代码行(@import“bootstrap”)
和
- b)bootstrap仍忠实地应用于我的页面布局,并出现在head标签的资产中。
2.卸载bootstrap-sass
我搜索了上面的错误,发现这个问题 ,这表明我卸载并重新安装bootstrap-sass。 虽然奇怪的是,即使我卸载了gem,引导设备仍保留在页面上,但这并没有奏效。
rails的版本是4.1.5
- 将所有css移动到application.css.scss
因为看起来我正在从application.css.scss加载引导程序,所以我在那里添加了我的CSS,但这也没有用。
- 在浏览器上隐身模式
最后我想如果卸载bootstrap-sass时引导程序没有消失那么可能它们被缓存在我的浏览器上了? 我认为在开发过程中没有发生这种情况,但以防我在隐身模式下启动了chrome。 仍然没有变化。
除了弄清楚如何解决这个问题之外,我真的很想了解这里发生了什么 – 希望我能更好地了解rails资产管道的工作原理。
的Gemfile
gem 'bootstrap-sass', '~> 3.2.0' gem 'sass-rails', '>= 3.2'
application.css
/* *= require shared/bootstrap-base *= require_self */
应用程序/资产/样式表/共享/自举-base.scss
@import "bootstrap";
itsnikolay的答案很好,但不会加载任何其他的CSS文件。 如果包含require_tree .
行require_tree .
在您的application.css文件中,您将加载其他文件。
这里唯一的问题是来自bootstrap的scss mixins可能无法正常工作,因为每个scss在被混合在一起之前被编译为css。 (参见railscast Sass基础知识 )。 如果你没有尝试重用bootstrap中的任何scss mixins,或者不知道我在说什么,你可能会忽略这一点,只需将require树行添加到application.css文件中:
application.css
/* *= require shared/bootstrap-base *= require_tree . #This line specifically is what will load the other .scss *= require_self */
否则,您需要将application.css更改为application.css.scss,然后使用sass @import命令导入:
application.css.scss
/* *= require_self */ @import "bootstrap-sprockets"; @import "bootstrap"; @import "my_custom_css_file"; @import "my_second_custom_css_file"; #etc...
有关管道如何工作的更多基本信息,请查看资产管道上的railscast 。 有点过时但绝对有用。
检查Bootstrap-Sass文档 :
您的application.css.scss
必须具有:
/* *= require_self *= require_tree . */ @import "bootstrap-sprockets"; @import "bootstrap";
当然,你需要在你的Gemfile
bootstrap-sass
gem:
gem 'bootstrap-sass', '~> 3.2.0' gem 'sass-rails', '>= 3.2' gem 'autoprefixer-rails' # not necessary, but recommended
您不需要在其他scss
文件中使用@import
Bootstrap。