레일 4와 컴퍼스, 어떻게 내 sass 파일을 한 번 가져올 수 있습니까?

Question

나는 내 모든 CSS 파일과 함께 "스타일 시트/응용 프로그램/index.css.scss"와 레일 4 프로젝트를 :

/* 
*= require jquery.ui.all 
*= require_tree ../shared 
*= require_tree ../design 
*= require_tree ../layout 
*= require_self 
*= require_tree . 
*/ 

레일 (찌르다) 최소 하나의 모든 CSS를 컴파일합니다.

많은 파일에 @import "shared/header"을 가져와야합니다.

exemple는 "스타일 시트/레이아웃/main.css.scss"

@import 'shared/header'; 

.header 
{ 
    @extend .header_common_overview; 
    [...] 
} 

하지만 난 다른 사람의 @import 'shared/header'도 파일. 결과는 다음과 같습니다.

레일즈가 하나의 파일로 컴파일 될 때 ".header_common_overview"규칙을 여러 번 사용하기 때문에 다른 파일로 가져 오기 때문에 여러 번 있습니다.

"import"명령을 index.css.scss에 직접 넣으려고했지만 작동하지 않습니다.

어떻게 파일을 한 번만 가져올 수 있으며 다른 모든 파일의 내용을 호출 할 수 있습니까?

Answer 1

먼저 사용하지 마십시오. require_tree . CSS 파일의 포함 순서를 제어 할 수 없으므로 잠재적으로 계단식 문제가 발생합니다. 스타일을 덮어 쓰지 않아도됩니다.

설명과 비슷한 이유로 주 SASS 파일에 스프로킷 'require 줄을 피하는 방법을 배웠습니다. 모든

변수/유지 mixin하기/etc ... 톱니를 통해 포함될 수 없습니다 여기 저기 =require_tree를 사용하여 특히

• 그것은, 복제로 이어질 수 (나는 이것에 대해 잘못 입증 싶어요 하지만) 당신의 index.css.scss 당신이 고려할 수에서

단순히

@import "vendor"; 
@import "shared"; 
@import "design"; 
@import "layout"; 

// Your main styling here. 

@import "another_file"; 

이 0

을 가하고줄은 다른 sass 파일과 일치합니다. 예를 들어 shared.css.scss 명시 적으로 그래서 당신은 이상 구매

포함을 완전히 제어 등이 각 자산을 정의 포함

을 자산 완전히 분리/조직을 유지

/* 
*=require ./shared/header 
*/ 

아이디어는

1. 에있는 것처럼 보일 수 있습니다
2. Sprockets =require 지시문 대신 SASS @import을 사용하여 변수, 믹스 핀 등을 전체에서 사용할 수있는 포함 된 파일에 보관하십시오.

Answer 2

내 솔루션은 다음과 같습니다

/* 
*= require jquery.ui.all => static, don't need import 
*/ 
@import 'included/**/*'; //all files included (at first time) 
@import 'all/**/*'; //all real css files which requires included file (in second times) 

순서 존중 및 제어 :와 all.css.scss 만듭니다.(가) 파일을 포함

는

포함 된 파일은 각각의 실제 CSS 파일에 공유 한 번만 존재합니다.

thx 도움.