2014-02-07 5 views
2

나는 Yeoman을 처음 사용합니다. 기본 스타일을 내 앱 스타일의 스타일로 변경하기 위해 온라인 생성기를 사용하여 맞춤 설정하려는 Bootstrap3을 사용하고 싶습니다.부트 스트랩이있는 여인 3

Yeoman이 모든 종속성을 처리하므로 어떻게 이러한 변경 작업을 수행하고 webapp에 추가 할 수 있습니까?

+0

'기본 스타일'이란 의미는 bootswatch 테마입니까? – vucalur

+0

@vucalur 아니오. 부트 스트랩을 수정할 수있는 기본 변수는 –

+2

오, 알았습니다. 그런 다음 Michael이 지적했듯이 SASSed 버전의 부트 스트랩을 사용하는 것이 유일한 '깨끗한'방법입니다. 추가로 기본 부트 스트랩의 테마를 사용하고 싶다면 (@import 'sass-bootstrap/lib/theme';) 내 응용 프로그램에서 어떻게 작동하는지 (bootstwatch 테마 사용) : [main.scss 파일 ] (https://github.com/vucalur/django-wibses/blob/master/django_wibses/django_wibses/wibses/yo/app/styles/main.scss) – vucalur

답변

3

발전기를 사용하는 경우 컴파일 된 CSS 파일이 있습니다. 이러한 파일은 프로젝트에서 하드 코딩하여 통합 할 수 있습니다 (대부분 index.html). 나는이 길로가는 것을 추천하지 않을 것이다. 생성기에서 제공하는 모든 CSS 구성 매개 변수는 변경할 수있는 새스 변수입니다.

@import 'sass-bootstrap/lib/bootstrap'; 
:

당신이 bootstrap.scss 파일을 포함해야 당신의 main.css가에 이물

bower install sass-bootstrap 

에 의해 말대꾸 - 부트 스트랩을 설치합니다 다음과 같이 자신의 프로젝트에서 이러한 변수를 사용할 수있다

이 include 문 앞에 부트 스트랩 생성기에서 제공하는 모든 변수를 변경할 수 있습니다. 예를 들어 작성해야하는 배경색을 변경하는 경우

$body-bg: eee; 

생성기에서 제공하는 모든 변수를 사용하여이 작업을 수행 할 수 있습니다. @$ 기호로 바꿉니다.

Gruntfiles.js에는 compass 타겟이 필요합니다. gruntfile을 설정하는데 문제가 있다면, https://npmjs.org/package/generator-bootstrap을보십시오. 이 생성기를 사용하면 샘플 프로젝트를 만들어 필요한 구성을 얻을 수 있습니다.

+0

수동으로 saas 파일을 htmls에 추가해야합니까? –

+0

감사합니다! 덜 부트 스트랩 버전으로 어떻게 할 수 있습니까? – Mauro

+0

@mauro - 너무 늦었 겠지만 LESS에는 같은 종류의 가져 오기 기능이 있습니다. http://lesscss.org/features/#import-options –

관련 문제