jQuery 플러그인 및 레일즈 자산 파이프 라인

Question

팬시 갤러리라는 jQuery 플러그인을 사용하고 있는데, 이는 종종 background:url("../images/fancygallery/arrows_sprite.png")과 같은 플러그인 폴더 내의 이미지 폴더에서 이미지를 호출합니다. 내 질문에 2 부분이 있습니다

1. 이 플러그인을 레일 3.1 응용 프로그램과 어떻게 통합해야합니까? 폴더가 vendors/assets 폴더 안에 있어야합니까? 플러그인에는 3 개의 폴더, css, images, js가 있습니다. 이것들을 vendor/assets/stylesheets, vendor/assets/images, vendor/assets/javascripts에 넣으면, 자산 파이프 라이닝이 끝나면 더 이상 존재하지 않으므로 CSS는 ../images 폴더에있는 이미지를 확실히 찾을 수 없습니다. 그렇다면이 부분을 어디에 두어야합니까?

2. 이미지를로드하는 모든 곳에서 내 플러그인에 들어가서 CSS를 편집 할 필요가없는 간단한 방법이 있습니까? 플러그인을 업데이트 할 때마다이 작업을 수행하고 싶지 않습니다. 플러그인 폴더를 삭제하고 작동하게하는 방법이 있어야합니다. 추가 테스트

   이되면

난에 실행하고있는 문제입니다. 예를 들어 CSS에서는 화살표 background: url('../images/fancygallery/arrows_sprite.png')을로드하는 부분이 있습니다. 플러그인 전체에서 모든 이미지는 ../images과 비슷합니다. 따라서 페이지가로드 될 때 플러그인을로드 할 때 이것은 이미지 http://localhost:3000/images/fancygallery/arrows_sprite.png을 찾는 방법이지만 이미지는 거기에 존재하지 않으며 assets/fancygallery/images 폴더에 있습니다. ../images을 http://localhost:3000/assets/fancygallery/images/에서 볼 수있는 방법이 있습니까? http://localhost:3000/images/이 아닌가요? 또는 플러그인 코드를 나중에 쉽게 업데이트 할 수 있도록 플러그인 코드를 변경할 필요가없는 다른 해결 방법이 있습니다. 문제의

일부 플러그인 CSS가이

@import "fancygallery/css/uniform.aristo"; 
@import "fancygallery/css/jquery.fancygallery"; 
@import "fancygallery/css/prettyPhoto"; 

그래서 모든 이미지가되고있다 relateve처럼 내 application.css.SCSS 파일에로드되는

입니다.

Answer 1

fancygallery-plugin 폴더를 추가 한 다음 fancygallery 폴더를 삭제하면 문제를 해결할 수있었습니다. asset:precompile 이후에는 assets 폴더에서 fancygallery 폴더를 사용할 수있었습니다. 그럼 간단하게이처럼 application.css.scss 파일 내부에서 직접 대신 CSS와 JS 파일이라고 :이 플러그인 개발자가 그들이로드 수를위한 방법 이미지 참조 그냥 작동하게

<%= stylesheet_link_tag "fancygallery/css/uniform.agent.css" %> 
<%= stylesheet_link_tag "fancygallery/css/jquery.fancygallery.css" %> 
<%= stylesheet_link_tag "fancygallery/css/prettyPhoto.css" %> 
<%= javascript_include_tag "fancygallery/js/jquery.uniform.min.js" %> 
<%= javascript_include_tag "fancygallery/js/jquery.fancygallery.min.js" %> 
<%= javascript_include_tag "fancygallery/js/jquery.prettyPhoto.js" %> 

벌금.