Sinatra 프로젝트에서 Twitter Bootstrap 및 Sass를 사용하는 방법은 무엇입니까?

Question

트위터 부트 스트랩은 Less로 작성되었지만 Sass 버전도 많이 있습니다. 나는 최선의 방법을 사용하고 Sinatra 프로젝트를 설정하는 방법을 찾는 데 어려움을 겪고 있습니다.

프로덕션 환경에서 자산을 미리 컴파일하고 지문을 채우지 만 비 압축 애셋을 개발하여 레일스 자산 파이프 라인과 같이 쉽게 디버깅 할 수 있습니다. bootstrap-sass을 설정하려고했지만 Compass가 필요합니다. 하지만 트위터 부트 스트랩 믹스를 모두 가지고있을 때는 나침반이 필요하지 않습니다. 나 또한 그것을 구성하는 데 문제가있었습니다.

어쨌든 내가해야 할 일에 대한 명확한 대답이 도움이 될 것입니다. 그냥 나에게 온 - 더 - 플라이 버전을 보여줍니다

<% if settings.development? %> 
    <link rel="stylesheet/less" href="/less/style.less"> 
    <%= javascript_tag "/js/libs/less-1.2.1.min.js" %> 
<% end %> 

<% if settings.production? %> 
    <%= stylesheet_tag "/css/mycss.css" %> 
<% end %> 

이 방법 :

은

Answer 1

는

난 그냥 부트 스트랩의 .less 버전 또는 내 재 컴파일 .CSS 버전에 대한 내 레이아웃 템플릿에 ENV 의존 태그를 사용 개발 모드에서는 .css 파일이 프로덕션 모드로 실행됩니다. 배포 할 때 명령 줄에서 스타일 시트를 컴파일하기 만하면됩니다.

@import "bootstrap/bootstrap.less"; 

@import "bootstrap/responsive.less"; 

:

$ lessc public/less/style.less > public/css/mycss.css 

는 (. 나는 또한 생산을위한 CSS 파일을 타임 스탬프 https://github.com/wbzyl/sinatra-static-assets/을 사용하고 그 예에서)

대중은/이하/style.less 같은 뭔가를 시작합니다 그리고 모든 부트 스트랩 .less 파일은 public/less/bootstrap/

에 있습니다.

기본적으로 모든 파일은 https://github.com/twitter/bootstrap/tree/master/less입니다. 당신이 정말로 말대꾸를 사용해야하는 경우 (

| :()

그리고 당신은 실제 핵심 부트 스트랩 파일을 당신이 만든 다른 파일을 가져 오거나 편집, 동일한 파일에 오버 라이딩 것을 직접 시작할 수 있습니다 이것이 왜 그렇게해야하는지 모르겠다. 주석을 참조하라.) 레이아웃에 쉽게 포함 할 수있는 표준 .js 컴파일러가 없으면 간단하지 않다.

개발 모드에서 실행 중일 때 config.ru에서 http://sass-lang.com/docs/yardoc/Sass/Plugin/Rack.html을 사용하도록 rack을 시도해 볼 수 있습니다. 나는 결코 그것을 시도하지 않고, 나는 그것을 사용하려고 한 번. 랙 랙 플러그인에 문제가 있었다.