如何在Ruby on Rails 3.1应用程序中使用Less? [英] How can I use Less in a Ruby on Rails 3.1 application?

问题描述

使用少(与 Sass /Scss结合使用)资产管道?

What is the easiest (is there an easy way?) to use Less (in combination with Sass/Scss) in the Ruby on Rails 3.1 assets pipeline?

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

I want to load a file like foo.css.less like I would do for bar.css.scss

我找到了一些对我不起作用的古怪解决方案(尝试不多): https://github.com/thisduck/ruby-less-js/issues/2

I found some wonky solution that does not work for me (haven't tried a lot): https://github.com/thisduck/ruby-less-js/issues/2

想法是以一种干净的方式使用Twitter Bootstrap.

The idea would be to use Twitter Bootstrap in a clean way.

推荐答案

如果只想使用Bootstrap，则可以通过在Gem文件中包含'less-rails'和'less-rails-bootstrap'宝石来做到这一点

If you only want to use Bootstrap, you can do it by including the 'less-rails' and 'less-rails-bootstrap' gems in your Gem file.

然后，您可以在.css.less文件中@import引导程序:

Then, you can @import bootstrap in your .css.less files:

@import "twitter/bootstrap"

或者，您可以分别包含每个组成文件(不包括不需要的文件):

Alternatively, you can include each constituent file individually (excluding those you don't want):

// 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-导轨配置.

If you don't want to use the less-rails-bootstrap gem for whatever reason, or you have non-bootstrap .less files that you want to include, you need to manually add your .less paths to the less-rails config.

请注意，如果文件名以.css.less结尾，则不需要任何额外的工作，因为资产管道应为您处理该编译(只要您已包含"less-rails").仅当您想直接在应用程序的.css.less文件中引用外部.less文件时，才需要执行此过程.

Note that none of this extra work is necessary if your filenames end in .css.less as the asset-pipeline should handle that compilation for you (as long as you've included 'less-rails'). This procedure is only required if you want to refer to external .less files directly in your app's .css.less files.

我用于引导的设置是将* .less文件复制到vendor/assets/frameworks/twitter/bootstrap.将文件保留在vendor/assets/stylesheets/...中导致了一些问题，这可能是由于Ruby on Rails魔术将导入的文件解析为未处理的.less文件，并且不知道如何处理它们(这只是我的推测，我没有看完全插入其中.)

The setup I use for bootstrap is to copy the *.less files to vendor/assets/frameworks/twitter/bootstrap. Keeping the files in vendor/assets/stylesheets/... caused me some issues, probably due to Ruby on Rails magic resolving my imports to the unprocessed .less files and not knowing what to do with them (this is only speculation on my part, I didn't look into it fully).

项目中一旦有.less文件，则需要告诉less-rails在哪里找到它们.为此，请将以下内容放入您的application.rb.

Once you've got the .less files in your project, you need to tell less-rails where to find them. Do that by putting the following in your 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文件中:

You can them import them in .css.less files by using:

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

这篇关于如何在Ruby on Rails 3.1应用程序中使用Less?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！