Question

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

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

我在名为header.css.scss的/app/assets/stylesheets目录中添加了另一个scss文件。这就像我想要的那样，被/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引用。

Answer 1

你实际上并没有做错任何事。

你可能会略微误解你在firebug中看到的内容。

您有多个与body标签匹配的CSS选择器。具有更具体选择器的CSS基于CSS的工作方式应用。 Firebug向您展示了所有匹配的CSS，并突出了实际应用的CSS重新定义的样式。

如果你没有重新定义的CSS似乎很重要，即使是首先应用，也可以将它应用于body标签的类或id。
当你添加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中包含scaffold和header，它们已被包含在内，并且使用stylesheet_link_tag再次包含它们。

Answer 2

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

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

从Rails中的scss文件重复css

2 个答案: