如何在rails 3.1应用程序中使用Less？

Question

什么是最简单的(有一种简单的方法吗？)在rails 3.1资产管道中使用Less(与Sass/Scss结合使用)？

我想加载像foo.css.less这样的文件,就像我为bar.css.scss做的那样

我找到了一些不适合我的解决方案(没有尝试过很多):https: //github.com/thisduck/ruby-less-js/issues/2

我们的想法是以干净的方式使用Twitter Bootstrap.提前致谢

Answer 1

如果你只想使用bootstrap,你可以通过在GemFile中包含'less-rails'和'less-rails-bootstrap'宝石来实现.

然后,您可以在.css.less文件中@import bootstrap:

@import "twitter/bootstrap"

或者,您可以单独包含每个组成文件(不包括您不想要的文件):

// Reset
@import "twitter/bootstrap/reset";

// Core variables and mixins
@import "twitter/bootstrap/variables";

@import "twitter/bootstrap/mixins";

// Grid system and page structure
@import "twitter/bootstrap/scaffolding";

// Styled patterns and elements
@import "twitter/bootstrap/type";
@import "twitter/bootstrap/forms";
@import "twitter/bootstrap/tables";
@import "twitter/bootstrap/patterns";

如果您不想出于任何原因使用less-rails-bootstrap gem,或者您想要包含非bootstrap .less文件,则需要手动将.less路径添加到less-rails配置中.请注意,如果您的文件名以.css.less结尾,则不需要这些额外工作,因为资产管道应该为您处理该编译(只要您包含'less-rails').只有在想要在应用程序的.css.less文件中直接引用外部.less文件时,才需要执行此过程.

我用于bootstrap的设置是将*.less文件复制到vendor/assets/frameworks/twitter/bootstrap.保存文件vendor/assets/stylesheets/...会给我带来一些问题,可能是因为Rails魔术解析了我对未经处理的.less文件的导入而不知道如何处理它们(这只是我的猜测,我没有完全研究它).

一旦你的项目中有.less文件,你需要告诉less-rails在哪里找到它们.做到这一点的把你的下面application.rb.

YourApp::Application.configure do
  config.less.paths << File.join(Rails.root,'vendor','frameworks')
  # Should be set to true in production.
  config.less.compress = false
end

您可以使用以下命令将它们导入.css.less文件:

@import "twitter/bootstrap/reset"
@import "twitter/bootstrap/variables"
...

Answer 2

只需将您的yourlessfile.less文件放入public/stylesheets，然后在您的视图中，将其包含在

stylesheet_link_tag "/stylesheets/yourlessfile.less", :rel => "stylesheet/less"

不要忘记在您的视图中包含 less.js。