Rails 3.1 자산 파이프라인을 사용하여 조건부로 특정 CSS 사용

Rails 3.1 자산 파이프라인을 사용하여 조건부로 특정 CSS 사용

저는 Rails 3.1.rc5를 사용하여 저의 첫 번째 단독 Rails 앱을 구축하는 중입니다.제 문제는 제 사이트가 다양한 CSS 파일을 조건부로 렌더링하기를 원한다는 것입니다.Blueprint CSS를 사용하고 있으며 스프로킷/레일을 렌더링하려고 합니다.screen.css대부분의 시간.print.css인쇄할 때만 사용합니다.ie.cssInternet Explorer(인터넷 익스플로러)에서 사이트에 액세스하는 경우에만 사용할 수 있습니다.

유감스럽게도 기본값은*= require_tree의 지휘권.application.css매니페스트는 모든 것을 포함합니다.assets/stylesheets디렉터리가 생성되고 불쾌한 CSS 혼란이 발생합니다.현재 해결 방법은 모든 것을 개별적으로 지정하는 일종의 브루트 포스 방법입니다.

application.css에서:

*= require_self
*= require home.css
...
*= require blueprint/screen.css

내 스타일시트에서 부분(햄):

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

이것은 효과가 있지만 특별히 예쁘지는 않습니다.저는 여기까지 가기 위해 몇 시간 동안 검색을 했지만 방금 놓친 더 쉬운 방법이 있기를 바랍니다.하위 디렉터리를 포함하지 않고 특정 디렉터리를 선택적으로 렌더링할 수 있다면 전체 프로세스가 훨씬 덜 경직될 것입니다.

감사합니다!

저는 자산 파이프라인을 사용하면서도 스타일시트를 그룹화하여 경직성을 줄이고 미래에 대비할 수 있는 방법을 찾았습니다.솔루션보다 훨씬 간단하지는 않지만 이 솔루션을 사용하면 전체 구조를 다시 편집할 필요 없이 새 스타일시트를 자동으로 추가할 수 있습니다.

당신이 하고 싶은 것은 별개의 매니페스트 파일을 사용하여 일을 나누는 것입니다.먼저 시스템을 다시 구성해야 합니다.app/assets/stylesheets폴더:

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

그런 다음 세 개의 매니페스트 파일을 편집합니다.

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

그런 다음 응용 프로그램 레이아웃 파일을 업데이트합니다.

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

마지막으로 구성/환경/production.rb에 이러한 새 매니페스트 파일을 포함하는 것을 잊지 마십시오.

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

업데이트:

Max가 지적했듯이 이 구조를 따르면 이미지 참조를 염두에 두어야 합니다.몇 가지 선택사항이 있습니다.

1. 동일한 패턴을 따르도록 영상을 이동합니다.
   • 모든 이미지가 공유되지 않은 경우에만 작동합니다.
   • 나는 이것이 일을 너무 복잡하게 만들기 때문에 대부분의 경우 시작하지 않을 것이라고 예상합니다.
2. 이미지 경로 확인:
   • background: url('/assets/image.png');
3. SAS 도우미 사용:
   • background: image-url('image.png');

오늘 우연히 이 문제를 발견했습니다.

결국 모든 IE 특정 스타일시트를 lib/assets/styleheet에 넣고 IE 버전당 하나의 매니페스트 파일을 만들었습니다.그런 다음 application.rb에서 사전 컴파일할 항목 목록에 추가합니다.

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

그리고 당신의 레이아웃에 매니페스트 파일을 조건부로 포함시키세요. 그러면 바로 시작할 수 있습니다.

그것은 꽤 깔끔한 방법입니다.저는 html이나 modernizr에 대한 조건부 수업을 사용합니다.modernizr-vs-conditional-classes-on-html의 기능에 대한 좋은 표현을 보려면 이 문서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/7134034/using-rails-3-1-assets-pipeline-to-conditionally-use-certain-css