是否可以将 application.css 更改为 application.css.sass ？

Question

我想将 application.css 文件更改为 sass 文件并使用 @import 提取所有必要的文件。然后我想将 application.css.sass @import 到页面特定的 sass 文件中。这一切在开发中都工作得很好，但是当我将其推送到 Heroku 上的生产环境时，我收到此错误：

Error compiling CSS asset
Sass::SyntaxError:  File to import not found or unreadable: application

application.css.sass:

@import "reset"
@import "typography"
@import "buttons"
@import "junk"

$yellow: #f0f090
$orange: #f89818
$blue1: #184898
$blue2: #4888c8

body
 background: ...
 ...
 /* all the rest of the app-wide styling */

uniquePage.css.sass:

@import "application"
/*page specific styling*/

然后需要与我调用的 application.css 不同的内容的页面

!!! 5
%html
  %header       
    = stylesheet_link_tag "uniquePage"

Answer 1

在 Rails 3.1 中，application.css 旨在用作清单文件。您不应该重命名它，也不应该在其中放置除 require 或 include 指令之外的内容。

根据您的目的使用不同的文件名。

另请注意，SCSS @import 语法 就像使用部分。如果您想要@import application，则要导入的文件应命名为_application，而不是application。

Answer 2

您应该将其更改为 application.scss :)

请检查这两个 RailsCast：

http:// /railscasts.com/episodes/279-understanding-the-asset-pipeline

http://railscasts.com/episodes/282-upgrading-to-rails-3 -1

+1 对 Simone 的建议

Answer 3

那么我想问题就变成了，如何为不同的 css 集制作不同的清单文件？

有几种方法可以做到这一点：

1.每页工作表

这就是您现在正在做的事情，但我会稍微不同地组织工作表，在应用程序和唯一页面中使用@imports。 （而不是将应用程序导入到唯一页面中）。

2.仅对这些页面使用第二个工作表

您可以使用第二个工作表仅包含该页面的更改。所有页面都有申请表，并且在唯一页面上添加第二个标签，仅进行所需的更改。这会花费您额外的 http 请求。

3.重新组织您的 CSS

除非额外的 CSS 很大，否则您最好进行重构以将代码包含在主文件中。可以很容易地将额外的类添加到唯一页面的 body 标记中，并调整任何 CSS 以供页面使用它。

您仍然可以将该 CSS 放入唯一页面的文件中（以帮助维护），然后将其 @import 到您的主文件中。

作为一般规则，除非 CSS 更改很大，否则我会尝试将它们合并到主 CSS 中，否则选择选项 1。