9

在 Ruby on Rails 3.1 资产管道中使用Less（与Sass /Scss 结合）最简单（有没有简单的方法？）是什么？

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

我发现了一些对我不起作用的不稳定解决方案（没有尝试过很多）： https ://github.com/thisduck/ruby-less-js/issues/2

想法是以干净的方式使用 Twitter Bootstrap。

4

5 回答 5

10

如果您只想使用 Bootstrap，您可以通过在 Gem 文件中包含“less-rails”和“less-rails-bootstrap”gem 来实现。

然后，您可以在 .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，或者您有要包含的非引导 .less 文件，则需要手动将 .less 路径添加到 less-rails 配置中。

请注意，如果您的文件名以 .css.less 结尾，则不需要这些额外工作，因为资产管道应该为您处理该编译（只要您包含“less-rails”）。仅当您想直接在应用程序的 .css.less 文件中引用外部 .less 文件时，才需要此过程。

我用于引导的设置是将 *.less 文件复制到vendor/assets/frameworks/twitter/bootstrap. 保留文件vendor/assets/stylesheets/...给我带来了一些问题，可能是由于 Ruby on 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"
...
于 2011-11-30T18:04:43.450 回答
1

这篇博文中的人创建了Less Ruby on Rails gem。

它使得在 Ruby on Rails 3.1 项目中减少工作变得容易。

于 2011-10-03T13:49:44.480 回答
0

我刚刚遇到了这个，但我还没有机会测试。

http://www.ciddennis.com/2011/09/getting-twitter-bootstrap-to-work-with-rails-31-asset-pipeline.html

于 2011-09-19T17:03:19.980 回答
0

请参阅http://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/中有关不同方法的讨论

于 2012-02-13T12:21:38.207 回答
-1

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

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

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

于 2011-09-06T14:04:26.780 回答