1

我在 Firebug 中注意到body元素的 css 显示了两次（第一次所有规则都被删除）。第一个body元素来自 url：http://localhost:3000/assets/application.css?body=1

第二个body元素来自 url： http://localhost:3000/assets/scaffolds.css?body=1

我在名为 header.css.scss 的目录中添加了另一个 scss 文件/app/assets/stylesheets。/assets/header.css就像我想要的那样，它现在被包含在所有网页中。但是 application.css 再次在每个页面中复制其所有内容。

我做错什么了吗？我不应该在资产中创建 header.css.scss 文件吗？为什么我的所有 css 规则都被复制了？

更新：我的 application.css 文件中只有一些简单的 css：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
*/
body {
    margin: 0;
}
#content {
    padding: 10px;
    background-color: #eee;
}
code {
    background-color: #d0d0d0;
    padding: 1px 3px;
}

我的 header.scss 文件与 application.css 没有任何共同之处：

@import "compass/css3/images";

header {
  border-bottom: 1px solid #6787d2;
  height: 7em;
  position: relative;
  background-color: #f0edee;
  background-image: url("/assets/background_header.png");
  padding: 10px 10px 0 10px;
  box-shadow: 0 -1px 3px #C0BABB inset;
}
header address {
  background-color: #b9dd8c;
  @include filter-gradient(#b9dd8c, #5ab86d, vertical);
  $experimental-support-for-svg: true;
  @include background-image(linear-gradient(top,  #b9dd8c 0%,#5ab86d 100%));
  border: 1px solid #15905b;
}

application.html.erb布局只有一个 CSS 参考：

<!DOCTYPE html>
<html>
<head>
  <title>whatever</title>
  <%= stylesheet_link_tag "application", :media => "all" %>

最后，视图没有任何对 CSS 的引用。

4

2 回答 2

1

你实际上并没有做错什么。

您可能会稍微误解您在萤火虫中看到的内容。

  1. 您有多个与 body 标签匹配的 CSS 选择器。具有更具体选择器的 CSS 是根据 CSS 的工作方式应用的。Firebug 向您展示了所有匹配的 CSS，并删除了由实际应用的 CSS 重新定义的样式。

    如果对您来说重要的是不要让重新定义的 CSS 甚至首先应用，请将其应用于 body 标签的类或 id。

  2. 添加 header.css 时，您应该期望 Rails 包含每个页面的 application.css、scaffolds.css 和 header.css 的所有内容。目的是将所有 CSS 预编译成一个主 CSS 文件，每个页面都会引用该文件。浏览器将只调用一次 CSS 文件，并将其缓存，因此它不必再次获取 CSS 文件。

    简单地说，将 header.css 添加到资产的目的是包含 header.css 和每个页面中的所有其他 CSS。要不应用将由重复规则重新定义的规则，由您来定义规则，以免它们无意重叠。（如果这是您想要的，它们应该只重叠。例如为 body 设置字体，然后更改 td 标签内的字体。）

我希望我明白你在问什么，这可以解决问题。

评论后编辑的另一个答案

我认为您可能正在做的是每次添加新的 CSS 文件时添加一个 stylesheet_link_tag。您应该只有一个 stylesheet_link_tag 用于应用程序，而不是任何用于脚手架或标题。通过在 application.css.scss 中包含脚手架和标头，它们已经被包含，并且使用 stylesheet_link_tag 再次包含它们。

于 2012-10-05T21:51:36.853 回答
0

我通过重命名解决了这个application.css问题application.css.scss。我这样做是因为我想在整个应用程序范围内添加一些 scss，结果证明它删除了我网页中所有重复的 css。

所以我不知道最初是什么导致了重复..

于 2012-10-08T08:49:51.997 回答