Yeoman을 사용하여 Sass로 나침반 스타일 가져 오기

Question

generator-webapp이 설치된 상태에서 yo webapp을 사용하여 프로젝트를 만들었습니다. 모든 것이 정상이지만 아직 뭔가가 누락되었습니다. 나는 그것이 너무 당황 스러울 것이므로 나는 결코 그렇게 쉽게 대답 할 수 없다고 확신한다.

Yeoman과 함께 나온 나침반을 사용하고 싶지만 어떻게해야할지 모르겠다. 내 말은, 분명히 어떤 Sass 파일 안에있는 @import "compass...etc"은 app/bower_components (Gruntfile.js 안에 지정된 Sass @import의 기본 경로) 내에서 작동하지 않으므로 compass 디렉토리가 없습니다.

컴퍼스 스타일 시트를 가져 오려면 어떻게해야합니까?

Answer 1

평상시처럼 나침반을 사용할 수 있습니다. compass create으로 바닐라 나침반 프로젝트를 설정하면 compass 폴더가 있습니다. 나침반이있는 헬퍼를 사용하려면 설명서에 설명 된대로 나침반을 가져올 수 있습니다.

@import "compass/css3"; 

.mybox { 
    @include box-shadow(red 2px 2px 10px); 
} 

main.scss

Answer 2

당신은 npm install grunt-contrib-compass와 나침반 툴툴 거리는 소리 작업을 설치하고 나침반 컴파일 작업을 추가 할 Gruntfile.js을 조정해야합니다.

테스트/livereload에 사용하기 위해 .temp/main.css으로 성가신을 컴파일하는 것과 같이 까다로운 부분이 있으므로 최종 빌드를 수행 할 때 dist으로 축소하는 것이 쉽지 않을 수 있습니다.

가장 쉬운 방법은 나침반이 별도의 디렉토리에있는 다른 발전기를 사용하는 것입니다. 예를 들어 angular 발전기에는 나침반과 나침반을위한 부트 스트랩이 있습니다. 그것은 꽤 멋지다.