使用波旁威士忌(机车CMS)

时间:2014-10-01 17:49:26

标签: ruby-on-rails bourbon locomotivecms wagon

用机车CMS的马车做波旁威士忌是否有可能成功?

我在旅行车的Gemfile中添加了波旁威士忌和整洁的宝石但是在捆绑安装和启动服务器后我得到了这个:

 File to import not found or unreadable: bourbon.
 Load paths:
 /Users/alex/workspace/locomotive-test/public/stylesheets
 /Users/alex/.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
 /Users/alex/.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
 Compass::SpriteImporter

1 个答案:

答案 0 :(得分:2)

我发现让机车与Bourbon(或Susy或任何插件SASS宝石)一起工作是一个两阶段的问题。首先,必须在Wagon gemfile中正确加载资源,然后必须在每个依赖文件中@import编译,以便在push引擎时正确编译。 / p>

要让Bourbon正确导入Wagon(1.5.1),请按照样本模式将Bourbon添加到:misc组中的gemfile中:

group :misc do
  # Add your extra gems here
  gem 'bourbon', require: 'bourbon'
end

然后,只需运行$ bundle install,它应该可以正常工作。我发现没有需要执行$ bourbon install并在我的public / stylesheets文件夹中包含实际的.css文件。宝石足以满足我的Wagon实例。

然而,将网站推向引擎可能会很棘手。 Wagon将在push上以任意顺序编译SASS文件(参考:LocomotiveCMS Google Group)。因此,在一个主sass文件中进行所有@import调用,并在顶级application.css文件中仅引用 该文件的最佳DRY rails实践不会起作用这里:

./public/stylesheets
  -application.css #requires self and main
  -main.scss #imports all other stylesheets, normally where we'd @import 'bourbon'
  /other_stylesheets
    -variables.scss
    etc. etc.

push上,Wagon在所有其他资源之前不会理解main.scss @import ed Bourbon。因此,它通常会因未定义的混合而失败...'

为了解决这个问题,我仍然将variables.scss,mixins.scss等放在一个文件夹(例如./public/stylesheets/base/)中,并在每个页面特定的样式表(帖子)上为这些资源调用@import。 scss等)。此外,任何使用Bourbon,Neat,Susy和任何mixin的样式表都必须在该gem引用 mixins 变量上调用@import。它必须在每张从属表中重复。

./public/stylesheets
  -application.css # requires self and main
  -main.scss # imports all other stylesheets, normally where we'd @import 'bourbon';
  /other_stylesheets
    -variables.scss # might @import 'font-awesome';
    -mixins.scss # @import 'bourbon'; @import 'variables'; 
    etc. etc.

不幸的是,这不是非常干的编码。实际上,可能会消除大量的膨胀和冗余。到目前为止,它是我使用这些宝石{{1}将我的Wagon网站{{}}发送到引擎的最可靠方法。话虽这么说,如果您正在寻找快速修复,而不是为每个页面识别每个资源push,您可以制作一个称为Bourbon,Neat,what-have-you的import.scss样式表并且只是@import将import.scss资源导入到每个其他工作表中。

最后一句话(着名的遗言!),即使是文档,引擎也不会接受.scss或.sass文件。预处理器样式表必须以.css:

为前缀
@import

否则,引擎会回复错误"您不能上传..."

希望有所帮助!

更新:

我在发布这个消息之后几周意识到机车与其他Rails应用程序中Sass问题的原因:我在application.css文件中使用了旧的sprockets语法。

因此,最好的方法是使尽可能多的 Sass工作表部分(使用下划线添加文件名 - > main.scss => main.css.scss )。然后,将application.css更改为Sass表 - > _example.css.scss。最后,不要像使用Sprockets那样使用任何application.css.scss调用。相反,我们可以而且应该使用Sass *= require调用的Rails最佳实践。如果是这样的话,你甚至可以在子文件夹中对你的部分进行全局处理。原因是,Locomotive默认安装sass-sprockets和sass-rails gems。这些gem使用sprockets / asset管道在application.css.scss文件中启用@import。通过将Sass partials用于后续样式表,application.css.scss的编译将拥有自己的域并将partials调用到其中,而不是在其自己的域中编译每个后续工作表。否则,您可能会看到@import因未知混音而失败...'在主申请表之外的第一张纸上。如果你按照正确的依赖顺序(哪个文件每个表需要?哪个首先......)订购你的部分,这个方法还有一个额外的好处,就是保持你编译的应用程序样式表非常干。

干杯!