從Rails中的scss文件複製css

我在Firebug中注意到body元素的css顯示兩次（第一次觸發所有規則）。第一body元素來自於網址：http://localhost:3000/assets/application.css?body=1從Rails中的scss文件複製css

第二屆body元素來自於網址： http://localhost:3000/assets/scaffolds.css?body=1

我又增加了SCSS文件中/app/assets/stylesheets目錄下名爲header.css.scss。現在，所有的網頁都包含/assets/header.css，就像我想要的那樣。但application.css再次複製了每個頁面中的所有內容。

我做錯了什麼？我不應該在資產中創建header.css.scss文件嗎？爲什麼我所有的CSS規則都被重複了？

UPDATE：我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。

來源

2012-10-05 at.

什麼是你application.css.scss文件的頂部？另外，你是否包括HTML中的application.css？你只應該有一個CSS鏈接到application.css。 –

隨着資產管道的開發，您可以分別獲得所有文件，'application.css'不應包含其餘文件中的任何代碼。你應該在你的文件系統中發佈整個'application.css'（而不是提供給瀏覽器的那個）。 – rewritten

我通過將application.css重命名爲application.css.scss解決了問題。我這樣做是因爲我想在應用程序範圍內添加一些scss，結果我的網頁中刪除了所有css的重複。

所以我不知道發生了什麼，使原本重複..

來源

2012-10-08 08:49:51

你實際上並沒有做錯什麼。

您可能會略微誤解您在螢火蟲中看到的內容。

您有多個與body標籤匹配的CSS選擇器。具有更具體選擇器的CSS根據CSS的工作方式進行應用。 Firebug向你展示了所有匹配的CSS，並且揭示了正在被實際應用的CSS重新定義的樣式。

如果重要的是你沒有獲得重新定義的CSS，即使首先應用，也可以將它應用到body標籤的class或id。
當您添加header.css時，您應該期望Rails包含每個頁面的application.css，scaffolds.css和header.css的所有內容。意圖是將所有的CSS預編譯成一個主CSS文件，每個頁面都會引用它。瀏覽器只會對CSS文件進行一次調用，並對其進行緩存，以便不必再次獲取CSS文件。

所以簡單地說，將header.css添加到資產旨在包括header.css和每個頁面中的所有其他CSS。如果沒有應用將由重複規則重新定義的規則，則由您來定義規則，以免它們無意中重疊。（如果這是你的原意，他們應該只重疊。比如設置體字體，而不是後來改變TD標籤中的字體。）

我希望我明白你問的是什麼，而這茅塞頓開向上。

另一個答案的評論後編輯

我想你可能做的是每次添加一個新的CSS文件時添加stylesheet_link_tag。您應該只有應用程序的stylesheet_link_tag，而不是腳手架或標題。通過在application.css.scss中包含scaffold和header，它們已經被包含，並且使用stylesheet_link_tag將再次包含它們。

來源

2012-10-05 21:51:36

你問的方式，讓我覺得你對這一切都是新鮮的，我適當地回答。我使用chrome的開發人員工具來識別重複的CSS，然後重新編寫CSS以避免重複。我還將CSS分解爲資產管道輸出的不同文件。但簡單地說，事情就像設計一樣工作，併爲新手設計，讓所有事情都能像現在這樣發生。 –

我想你誤解了這個問題。不過謝謝。 –

我以爲你在問兩件事。一個關於通過，然後添加標題的其他內容。 –

從Rails中的scss文件複製css

回答

相關問題