【问题标题】:How can I use Less in a Ruby on Rails 3.1 application?如何在 Ruby on Rails 3.1 应用程序中使用 Less?
【发布时间】:2011-11-11 08:16:16
【问题描述】:

在 Ruby on Rails 3.1 资产管道中使用Less(结合Sass/Scss)最简单(有什么简单的方法吗?)是什么?

我想像加载 bar.css.scss 一样加载像 foo.css.less 这样的文件

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

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

【问题讨论】:

    标签: ruby-on-rails-3.1 sass less asset-pipeline


    【解决方案1】:

    如果您只想使用 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-轨道配置。

    请注意,如果您的文件名以 .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"
    ...
    

    【讨论】:

    • 我使用了你的第二种方法,它绝对有效!谢谢@billmag
    【解决方案2】:

    来自this blog post 的人创建了Less Ruby on Rails gem。

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

    【讨论】:

      【解决方案3】:

      【讨论】:

        【解决方案4】:

        【讨论】:

        • 链接已损坏 (404)。
        【解决方案5】:

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

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

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

        【讨论】:

        • 是的,当然,这是一个干净简单的解决方案,但是 less 文件不会通过资产管道。我希望它由 sprocket 处理并与其余部分一起压缩...
        • 这是对问题标题的一个很好的回答,但不是问题详细信息。对于看到标题进行搜索的人来说,这很方便。
        猜你喜欢
        • 2011-11-12
        • 2011-09-08
        • 2010-10-22
        • 1970-01-01
        • 2017-07-16
        • 1970-01-01
        • 1970-01-01
        • 2020-09-20
        • 2010-12-01
        相关资源
        最近更新 更多