특정 CSS를 조건부로 사용하기 위해 Rails 3.1 자산 파이프 라인 사용

특정 CSS를 조건부로 사용하기 위해 Rails 3.1 자산 파이프 라인 사용

---

Rails 3.1.rc5를 사용하여 첫 번째 Solo Rails 앱을 구축하는 중입니다. 내 문제는 내 사이트가 다양한 CSS 파일을 조건부로 렌더링하도록하려는 것입니다. Blueprint CSS를 사용하고 있으며 인쇄 할 때와 Internet Explorer에서 사이트에 액세스 할 때만 스프로킷 / 레일을 screen.css대부분 렌더링하려고합니다 .print.cssie.css

불행하게도, 매니페스트 의 기본 *= require_tree명령 application.css은 assets/stylesheets디렉토리의 모든 것을 포함 하고 불쾌한 CSS 혼란을 초래합니다. 현재 해결 방법은 모든 것을 개별적으로 지정하는 일종의 무차별 방법입니다.

application.css에서 :

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

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

<!--[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]-->

Lastly, don't forget to include these new manifest files in your config/environments/production.rb:

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

Update:

As Max pointed out, if you follow this structure you have to be mindful of image references. You have a few choices:

1. Move the images to follow the same pattern
   • Note that this only works if the images are not all shared
   • I expect this will be a non-starter for most since it complicates things too much
2. Qualify the image path:
   • background: url('/assets/image.png');
3. Use the SASS helper:
   • background: image-url('image.png');

---

Came across this problem today.

Ended up putting all IE specific stylesheets into lib/assets/stylesheets and creating one manifest file per version of IE. Then in application.rb add them to the list of things to precompile :

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

And in your layouts, conditionally include those manifest files and you're good to go!

---

Thats a pretty neat way to do it. I use conditional classes on html or modernizr. See this article for a good representation on what does what. modernizr-vs-conditional-classes-on-html

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