bootstrap CSS加载与引导sass，其他CSS将不会加载

我使用Bootstrap为我的Rails应用程序与引导sass诉3.1.1，它一直工作得很好，在我的application.css .scss文件：bootstrap CSS加载与引导sass，其他CSS将不会加载

@import "bootstrap";

没有别的。就在今天，我尝试添加一些自己的CSS来增加样式，这是我在Bootstrap中没有得到的。这是对我的欢迎视图/控制器，所以我刚才添加它来welcome.css.scss

.complete-class { 
    text-decoration: line-through; 
}

从阅读this section of the Rails Guides我的理解是，你可以包括像在这样的清单welcome.css.scss一个CSS文件：

@import "bootstrap"; 

/* 
*= require_self 
*= require_tree . 
*/

这没有成功应用我的CSS; welcome.css.scss也不会出现在head标签中。

当我试图调试这我遇到了一些奇怪的事情，我觉得我也应该指出：

1.错误导入引导

的Syntastic插件VIM有益指出错误：

File to import not found or unreadable: bootstrap. Load path: /home/stephen/code/blocitoff/app/assets/stylesheets

这很奇怪，因为

一）此错误没有，显示出尽管我没有改变的代码，它是指（@import“引导”）

和

b中的前行了）引导程序仍然忠实地应用在我的页面布局中，并出现在head标签中的资源中。

2.卸载自举-SASS

我搜索上述错误，并发现其this issue建议我卸载和重新安装引导-萨斯。尽管奇怪的是，即使卸载了宝石，bootstrap styilng仍保留在页面上。

导轨的版本是4.1.5

移动所有的CSS到application.css.scss

由于似乎自举正从装载application.css.scss以某种方式我在那里添加了我的CSS，但也没有工作。

浏览器

最后，我认为，如果引导不打算离开时，我卸载引导，青菜，那么也许他们被缓存在

隐身模式我的浏览器？我认为这并没有在开发过程中发生，但以防万一我在隐身模式下启动了Chrome。仍然没有变化。

不仅仅是搞清楚如何解决这个我真的想明白了一些什么事就在这里 - 希望我能得到怎样的轨道资产管道工程的一个更好的主意。

来源

2014-09-23 Stephen Mariano Cabrera

的Gemfile

gem 'bootstrap-sass', '~> 3.2.0' 
gem 'sass-rails', '>= 3.2'

application.css

/* 
*= require shared/bootstrap-base 
*= require_self 
*/

应用程序/资产/样式表/共享/自举base.scss

@import "bootstrap";

来源

2014-09-23 19:06:27 itsnikolay

谢谢！只是好奇，你知道为什么引导样式没有消失，即使我删除了宝石？那部分让我很困惑。还有，我应该知道那些宝石的版本有什么特别之处？ – 2014-09-23 19:32:33

可能服务器没有重启？在从'Gemfile'中删除'bootstrap'行后，不要忘记再次运行'bundle'。 ;） – itsnikolay 2014-09-23 19:34:56

根据你必须删除所有的一切'* = require_self和* = require_tree引导文件。 'from app/assets/stylesheets/application.css app/assets/stylesheets/application.scss – PerseP 2016-05-04 11:22:07

检查Bootstrap-Sass documentation：

你application.css.scss必须具备：

/* 
*= require_self 
*= require_tree . 
*/ 

@import "bootstrap-sprockets"; 
@import "bootstrap";

当然，你需要在你Gemfilebootstrap-sass宝石：

gem 'bootstrap-sass', '~> 3.2.0' 
gem 'sass-rails', '>= 3.2' 
gem 'autoprefixer-rails' # not necessary, but recommended

你不需要@import引导其他scss文件。

来源

2014-09-23 19:13:04

注意：当前的Bootstrap文档中说删除'application.css.scss'中的所有'require'和'require_tree'指令并使用'@只有进口''而不是。 – 2015-01-18 13:54:58

itsnikolay的回答是不错的，但不seeem加载任何其他CSS文件。如果在application.css文件中包含行require_tree .，则会加载其他文件。

只有在这里的问题是，因为每个SCSS被混久了之前编译CSS从引导SCSS混入可能无法正常工作。（见railscast Sass basics）。如果你不想从bootstrap中重新使用任何scss mixins，或者不知道我在说什么，那么你很可能忽略了这一点，只需在您的application.css文件中添加require tree行：

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 on the asset pipeline更基本的信息。有点过时但绝对有用。

来源

2014-12-07 09:29:37 Josh

bootstrap CSS加载与引导sass，其他CSS将不会加载

回答

相关问题