Rails资产管道中的动态CSS，可即时编译 [英] Dynamic CSS in Rails asset pipeline, compile on fly

问题描述

我正在Rails 3.2中构建一个站点.我接触过Rails或Ruby已有3年了，所以我对两者都感到生疏，加上我上次使用Rails的时候是Rails 2.3.不用说，请原谅下面的任何简单"问题.

I'm building a site in Rails 3.2. Its been 3 years since I've touched Rails or Ruby, so I'm rusty on both, plus the last time I used rails is was Rails 2.3. Needless to say, please excuse any "simple" questions below.

• 多Tennant CMS/商店站点
  • http://company1.mywebsite.com
  • http://company2.mywebsite.com
  • 等
  • Multi Tennant CMS/Store Site
    • http://company1.mywebsite.com
    • http://company2.mywebsite.com
    • etc.
    • 可以在应用程序中的UI中执行自定义，允许用户更改Bootstrap的基本变量(即@textColor，@bodyBackground等)
    1. 我需要能够将CSS的变量动态输出到混合到Bootstrap的文件中，以便拾取变量以创建最终的CSS
    2. 当用户更改CSS变量时，现有样式基本上无效.我需要重新编译完整的CSS并将其写回到磁盘，内存流或其他可以方便使用的位置(请记住，这使用的是less)
    3. 我需要不同的CSS才能在每个子域中吐出.有关如何处理此问题的任何建议?

    进一步使事情复杂化...

    ...鉴于我基本上必须找到某种方式来即时编译CSS，这意味着我必须包括通常在生产环境中不会使用的GEMS.性能将非常重要.有办法隔离吗?一旦CSS无效并重新生成，我就可以获取内容并将其写到磁盘或存储在某些memcached/redis/etc中.性能实例.

    Further complicating the matter...

    ...given that I essentially will have to find some way to compile the CSS on the fly, that means I have to include GEMS I typically would not in a production environment. Performance will be very important. Is there a way to isolate this? Once the CSS has been invalidated and regenerated, I could take the content and either write it out to disk or store is in some memcached/redis/etc. instance for performance.

    任何评论，即使只是将我指向一个总体方向也将不胜感激.

    Any comments, even if just to point me in a general direction would be appreciated.

    谢谢！

    推荐答案

    这是我最后找到的解决方案:

    Here is the solution I finally landed on:

    • 我最终切换到bootstrap-sass，而不是 https://github.com/thomas- mcdonald/bootstrap-sass

    • 对我的application.rb文件进行了以下更改，以确保无论环境如何，总是包含:asset组:

    • I ended up switching over to bootstrap-sass instead https://github.com/thomas-mcdonald/bootstrap-sass

    • Made the following changes to my application.rb file to ensure that the :asset group is always included despite the environment:

    if defined?(Bundler)
        # If you precompile assets before deploying to production, use this line
        # Bundler.require(*Rails.groups(:assets => %w(development test)))
        # If you want your assets lazily compiled in production, use this line
        Bundler.require(:default, :assets, Rails.env)
    end
    

  • 使用了Kraut Computing的Manuel Meure(谢谢Manuel！)提供的概念，该概念位于

  • 我做了一些调整以满足自己的需要，但是Manuel阐述的核心概念是我编译过程的基础.

  在我的模型中(我们称其为"站点")，我有一段代码如下:

  In my model (lets call it "Site"), I have a snippet of code that looks like this:

  # .../app/models/site.rb
  ...
  
  BASE_STYLE = "
    @import \"compass/css3\";
  
    <ADDITIONAL_STYLES>
  
    @import \"bootstrap\";
    @import \"bootstrap-responsive\";
  ".freeze
  
  # Provides the SASS/CSS content that would 
  # be included into your base SASS content before compilation
  def sass_content
    "
    $bodyBackground: #{self.body_background};
    $textColor: #{self.text_color};
    " + self.css # Any additional CSS/SASS you would want to add
  end
  
  def compile_css(test_only = false, force_recompile = false)
  
    # SassCompiler is a modification of the information made available at the Kraut Computing link
    compiler = SassCompiler.new("#{self.id}/site.css", {:syntax => :scss, :output_dir => Rails.root.join('app', 'assets', 'sites')})
  
    # Bail if we're already compiled and we're not forcing recompile
    return if compiler.compiled? && !force_recompile && !test_only
  
    # The block here yields the content that will be rendered
    compiler.compile(test_only) {
      # take our base styles, slap in there some vars that we make available to be customized by the user
      # and then finally add in our css/scss that the user updated... concat those and use it as
      # our raw sass to compile
      BASE_STYLE.gsub(/<ADDITIONAL_STYLES>/, self.sass_content)
    }
  end
  

我希望这会有所帮助.我知道它与原始帖子有所不同，但是它偏离了，因为这似乎是解决该问题的最可行的方法.

I hope this helps. I know its a deviation from the original post, but its deviated because this seemed to be the most attainable solution to the problem.

如果我没有回答您的特定问题，请随时发表评论，以便在可能的情况下进行扩展.

If I haven't answered a specific question you have, feel free to comment so I can expand where possible.

谢谢！

这篇关于Rails资产管道中的动态CSS，可即时编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！