2012-10-05 3 views
1

body 요소에 대한 CSS가 두 번 표시됩니다 (모든 규칙이 처음으로 삭제되었습니다). 첫 번째 body 요소는 URL에서 제공 : http://localhost:3000/assets/application.css?body=1레일스에서 ​​scss 파일과 중복 된 CSS

제 2 body 요소는 URL에서 제공 : http://localhost:3000/assets/scaffolds.css?body=1

내가 /app/assets/stylesheets 디렉토리라고 header.css.scss 다른하는 SCS 파일을 추가했습니다. 이제는 원하는대로 모든 웹 페이지에 /assets/header.css으로 포함됩니다. 그러나 application.css는 모든 페이지의 모든 내용을 다시 복제합니다.

내가 잘못 했습니까? 자산에 header.css.scss 파일을 만들지 않았습니까? 왜 내 모든 CSS 규칙이 중복됩니까?

UPDATE :

@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; 
} 
:

/* 
* 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과 아무런 공통점이 없다 : 내 application.css의 파일은 거기에 몇 가지 간단한 CSS를 가지고

application.html.erb 레이아웃에는 CSS 참조가 하나만 있습니다.

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

마지막으로보기에는 CSS에 대한 참조가 전혀 없습니다.

+0

application.css.scss 파일의 맨 위에있는 항목은 무엇입니까? 또한, html의 application.css 이상을 포함하고 있습니까? application.css에 대한 CSS 링크 만 있어야합니다. –

+0

자산 파이프 라인을 개발할 때 모든 파일을 별도로 가져오고,'application.css'는 나머지 파일의 코드를 포함하지 않아야합니다. 'application.css' 전체를 파일 시스템에 게시해야합니다 (브라우저에 제공되는 것이 아닙니다). – rewritten

답변

0

application.css의 이름을 application.css.scss으로 변경하여 문제를 해결했습니다. 나는 scss 응용 프로그램을 추가하고 싶었고 내 웹 페이지에서 CSS의 모든 복제본을 제거했기 때문에 그렇게했습니다.

그래서 원래 복제가 어떻게되었는지 알 수 없습니다.

1

실제로 아무 잘못하지 않습니다.

개똥 벌레에 보이는 내용을 약간 잘못 해석 할 수 있습니다.

  1. body 태그와 일치하는 CSS 셀렉터가 여러 개 있습니다. 더 구체적인 선택기가있는 CSS는 CSS가 작동하는 방식에 따라 적용됩니다. Firebug는 실제로 적용되는 CSS에 의해 재정의되는 스타일을 찾아내는 모든 CSS를 보여줍니다.

    재정의 할 CSS를 처음부터 적용하는 것이 중요하다고 생각되면 body 태그의 클래스 또는 ID에 적용하십시오.

  2. header.css를 추가 할 때 모든 페이지에 대해 application.css, scaffolds.css 및 header.css의 모든 내용을 포함해야합니다. 모든 CSS가 하나의 마스터 CSS 파일로 사전 컴파일되어 모든 페이지가 참조하게됩니다. 브라우저는 CSS 파일을 정확히 한 번 호출하고 CSS 파일을 다시 가져올 필요가 없도록 캐시합니다.

    간단히 말해, header.css를 자산에 추가하는 것은 header.css 및 모든 페이지의 다른 모든 CSS를 포함하기위한 것입니다. 중복 규칙에 의해 재정의 될 규칙을 적용하지 않으려면 실수로 겹치지 않도록 규칙을 정의해야합니다. (그들은 해당 당신이 의도라면 몸의 글꼴을 설정하는 예를 들어. 중첩해야하고 나중에 TD 태그 내부의 글꼴을 변경하는 것보다.)

을 나는 당신이 요구 한 것을 이해하고이 일을 지워 희망 쪽으로.

코멘트를 한 후 편집 된 또 다른 대답은

내가 무슨 일을 할 수있는 것은 stylesheet_link_tag에게 새 CSS 파일을 추가 할 때마다 추가 생각합니다. 응용 프로그램에는 stylesheet_link_tag 만 있어야하며 스캐 폴드 또는 헤더에는 사용할 수 없습니다. scaffold와 header를 application.css.scss에 포함시킴으로써 이미 포함되어 있으며, stylesheet_link_tag를 사용하면 다시 포함됩니다.

+0

당신이 물어 보는 길은, 당신이이 모든 것을 처음 접했고, 나는 적절하게 대답했다고 생각합니다. 나는 크롬의 개발자 도구를 사용하여 중복 된 CSS를 식별 한 다음 중복을 피하기 위해 CSS를 다시 작성했습니다. CSS를 자산 파이프 라인에서 출력 된 여러 파일로 분해했습니다. 그러나 간단히 말하면, 모든 것이 설계대로 작동하고 있으며, 초보자가이 모든 일을 그대로 유지하도록 설계되었습니다. –

+0

나는 그 질문에 대해 오해했다고 생각합니다. 그래도 고마워. –

+0

나는 두 가지를 묻고 있다고 생각했다. 하나는 파업에 관한 것이고, 다른 하나는 헤더를 추가 할 때의 것입니다. –

관련 문제