글로벌 CSS - 여러 프레임 워크를 구현하는 방법

Question

웹 스크립트/웹 앱이 많이 있는데, 주로 자바 스크립트입니다. extJS 프레임 워크와 상당한 사용자 정의 스크립트를 사용합니다. main.css라고하는 글로벌 스타일 시트는 extJS 라이브러리 스타일과 우리 고유의 새 스타일 및 extJS 스타일 재 지정으로 구성됩니다. 이것은 모두 SASS를 사용하여 컴파일됩니다.

이제 앱을 웹 페이지에 삽입하고 싶습니다. 이는 임베드 래퍼없이 수행되지만 실제로는 글로벌 스타일 사용을 포함하여 페이지에서 앱을 실행합니다.

페이지의 외부 콘텐츠 (비 응용 프로그램)는 부트 스트랩 CSS 프레임 워크 및 일부 jquery 요소와 일부 부트 스트랩 무시 및 일부 맞춤 스타일을 사용하는 맞춤 디자인입니다.

스타일이 앱 스타일과 크게 다르며 충돌을 피하기 위해 부트 스트랩을 글로벌 CSS로로드 할 수 없습니다.

어떻게하면 관련 영역에 대해 syles를 호출하여 extJS, bootstrap, jquery 등의 핵심 프레임 워크를 버전 제어/업데이트 할 수 있고 글로벌 스타일 간의 충돌을 피할 수 있습니다. 다른 사일로?

는 는

Answer 1

나는이에 중요한 부분을 오해 할 수 있지만, 당신이 SASS를 사용하고 있기 때문에, 당신은 간단하게 사용할 수 있습니다

입니다

#some-custom-area { 
    @import "path/to/bootstrap-result.css"; 
} 

, 당신이 한 모든 사용자 정의 규칙을 부트 스트랩 CSS 프레임 워크를 가지고 그것을 위해 (어떤 CSS 파일이든 그 파일들이 컴파일 된 후에) 전역 스타일 시트로 가져 오지만 ... #some-custom-area 선택자로 싸여 있습니다. SASS가이를 컴파일하면 Bootstrap 측의 모든 규칙이 #some-custom-area 내에서만 유효하다는 것을 보장합니다.

그게 가능한가요?