2014-06-11 3 views
3

내 스타일 시트가 내 앱의 일부 요소에만 적용되고 다른 요소에는 적용되지 않습니다. 이유가 확실하지 않습니다. 여기 스타일 시트가 sinatra erb보기에 적용되지 않습니다.

내 문서 구조 : 트리에서

Document structure

현재, 스타일 시트 index.erb에 적용되고 있으며 contacts.erb 아닌 다른 사람, 나는 이유를 모르겠어요 . 내 레이아웃에서

은 내가 지정한 : <link rel="stylesheet" type="text/css" href="style.css">

어떤 아이디어?

+1

작동하는 페이지와 그렇지 않은 페이지의 경로는 무엇입니까? 당신의'href'는 상대적입니다. 그래서 어떤 것이 단일 레벨이 아니라면 페이지는 스타일 시트를 찾지 못할 것입니다. – matt

+0

모든 파일이 레이아웃을 사용합니까? CSS를 사용하고 CSS를 사용하지 않는 페이지의 URL은 무엇입니까? – Amadan

+0

작동하는 경로는 '/'및 '/ contacts'입니다. '/ contacts/: id/edit'라는 특정 연락처를 수정하면 '/ contacts/new'가 아닌 '/ contacts/: id'라는 특정 연락처와 '/ contacts/: id/edit' 그리고 예, 모든 파일은 레이아웃을 사용하며 뷰 내에 올바르게 저장됩니다. – Zack

답변

9

브라우저가 현재 URL을 기준으로 상대방에게 요청하기 위해 스타일 시트에 대한 상대 참조를 사용하고 있습니다. 즉, //contacts을 입력하면 브라우저에서 /styles.css을 요청하므로 찾으십시오. 예를 들어 /contacts/1은 존재하지 않는 /contacts/style.css을 요청합니다. 로그를 확인하면이 일이 발생한 곳에서 404 초의로드가 표시됩니다.

해결 방법은 스타일 시트의 절대 경로를 사용하는 것입니다.

<link rel="stylesheet" type="text/css" href="/style.css"> 

보다 강력한 솔루션을하는 것입니다 : 당신이 애플 리케이션 당신 서버의 루트에 설치되었다고 가정 그냥 href의 시작 부분에 /를 추가하여이 작업을 수행 할 수 있습니다 (즉, 요청이 http://example.com/contacts/1을 예 만들어집니다)

<link rel="stylesheet" type="text/css" href="<%= url("/style.css")%>"> 
+0

자세한 설명은 대단히 감사합니다. 최하위 솔루션이 더 강력한 이유에 대해 자세히 설명해 주시겠습니까? 저는 문자 그대로 Sinatra와 함께 일하기 시작했습니다. 그래서 어떤 설명도 정말 감사 할 것입니다. – Zack

+1

@Zack Rin (Sinatra 및 대부분의 다른 프레임 워크에서 사용하는 Ruby 웹 서버 인터페이스)을 사용하면 마스터 응용 프로그램의 다양한 지점에 마운트 된 다른 응용 프로그램을 포함하는 응용 프로그램을 만들 수 있습니다. 예를 들어 앱이 큰 앱에서 '/ foo'에 마운트 될 수 있으므로 urls는 예 : '/ foo/contacts/1'. 스타일 시트는'/ foo/style.css'에 있습니다. 'url'을 사용하면이 int 계정을 사용하고 수동으로 변경하지 않고도 올바른 URL을 생성 할 수 있습니다. – matt

+1

또한 앱이 아파치 나 Nginx와 같은 리버스 프록시 뒤에 있기 때문에 앱 서버 머신이 'my-internal-name.internal'이지만 "실제"주소가 myserver.com이라면'url'은 올바른 (외부) URL 이는 리디렉션에 유용합니다. 리디렉션은 귀하의 경우보다 절대적인 URL이어야합니다. – matt

0
<link rel="stylesheet" type="text/css" href="/style.css"> 

공용 폴더 : 앱이 (레일즈 응용 프로그램 내에서 예) 다른 지점에 설치 또는 프록시 뒤에있는 경우에도 정확한 URL을 확인합니다 url helper이 사용됩니다 사용 프로덕션 환경에있을 때 브라우저의 캐시에 저장 될 CSS, js 파일을 저장하기 위해 항상 수행됩니다.

관련 문제