css - 我可以在同一个应用程序中使用 CSS 资源和公用文件夹吗?

标签 css ruby-on-rails ruby-on-rails-3

我有一个遗留应用程序,我想将其迁移以使用 Rails 3 Assets 管道。我有超过 100 个样式表,它们是使用

逐个模板导入的
content_for :stylesheets

阻止。

将它们全部编译到一个样式表中目前并不容易,因为编写代码时只希望某些页面上有某些样式表,因此例如登录页面导入一个样式表,该样式表重新定义了文章形式。在所有页面上重新定义它并不好。

有没有一种方法可以让应用程序先查找已编译的 Assets ,然后将其故障转移到public/stylesheets 目录,从而缓慢迁移到 Assets 管道?

最佳答案

如果你想“正确”地做到这一点,不需要花费大量精力的一件事就是在你的 <html> 上放置一个类名。或 <body>使用选择器标记和包装 CSS 文件的内容。例如,我在 ApplicationController 中使用类似于以下内容的内容.

before_filter :body_class

def body_class
  controller_name = self.class.name.gsub(/Controller$/, '')
  if !controller_name.index('::').nil?
    namespace, controller_name = controller_name.split('::')
  end

  @body_classes = ["#{controller_name.underscore}_#{action_name} ".downcase.strip]
  @body_classes = ["#{namespace.underscore}_#{@default_body_classes.join}".strip] if !namespace.nil?
end

然后,在我的布局中我有类似的东西

<body class="<%= @default_body_classes.join(' ') %>">

接下来,您可以将所有样式表的扩展名更改为 .css.scss .把它们都放在新的 app/assets/stylesheets 里目录。要快速包含它们(尽管可能乱序),添加

/*
 * =require_tree .
 */

到新app/assets/application.css.scss的顶部文件。只包括这个 application.css文件在你的布局中。

<%= stylesheet_link_tag "application", :media => 'screen' %>

最后,花一些时间检查您的样式表,用适当的正文类包装整个文档。例如,如果您有一个特定于某些 User::Admin 的样式表 Controller 的 signup操作,您将用

包装整个样式表
.user_admin.signup {
  /* Your stylesheet's content here */
}

Sass 会为所有嵌套内容正确地添加前缀 .user_admin.signup将附加到您的 <body> 的类在呈现该操作时标记。

我意识到这并不是您正在寻找的真正的中间解决方案,但按照与此类似的步骤,您应该能够毫不费力地完成 95% 的工作,而且它会“正确”地完成".

关于css - 我可以在同一个应用程序中使用 CSS 资源和公用文件夹吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13194003/

相关文章:

ruby-on-rails - 包括 'redirect_to' 方法在内的测试失败,但应用程序运行正常。 Michael Hartl 书第 9.2.2 章 (v 3.2)

ruby-on-rails - 使用 Rspec 和 Capybara 设置一个新的 RoR 项目

ruby-on-rails - 迁移错误 : undefined method `cache' for Gem:Module

ruby-on-rails - 获取/创建/更新/销毁公用文件夹文件的 Controller

javascript - iOS safari 上手机和电子邮件的输入验证

javascript - 克隆一个下拉选项并在将其存储在同一下拉列表中后以不同的方式命名

css - PIE CSS 适用于 IE9 但不适用于 IE8

ruby-on-rails - 如何将临时文件编写为二进制文件

ruby - PDFKit 不使用 GET 调用中的参数

css - 我想在 bootstrap 4.1 中添加新的响应断点 css