semantic-ui 테마 커스트마이징 하기

 

bootstrap 만 쓰다가 semantic-ui 가 예뻐서 사용해 봤습니다.  만족스럽더군요.

한참 프로젝트를 진행하다 폰트를 바꿀일이 있어 살펴보니 각 엘리먼트마다 font-family가 지정되어 있었습니다.
이걸 다 어떻게 바꾸지 하고 멘붕이 왔습니다.

다행히 Theming 이라는 테마변경 기능이 존재했습니다.  하지만 첨 해보는 gulp 도 알아야하고 뭔가 좀 복잡하더군요.
어떻게 꾸역꾸역 하긴 했는데 gulp build 에서 넘어가지가 않고 계속 멈춰 있습니다. ㅜㅜ

반나절을 씨름하다 검색에 검색을 해보니 semantic-ui 자체의 에러였습니다 ㅜㅜ  오래된 버그인데 고칠생각을 안하고 있더라구요.

해외유저도 열받았는지 fomantic-ui라고 Fork 한 프로젝트가 이것을 해결해 놨네요.  해외유저들 후덜덜...
암튼 하는 방법 알려드립니다.

1. 일단 폴더하나를 만듭니다.  저는 test 라고 했습니다

$ mkdir test

2. npm 초기화를 합니다

$ npm init

3. fomantic-ui 를 설치합니다.

$ npm install --save fomantic-ui

위 명령을 치고 나면 "gulp install" 이 자동실행됩니다.
첫번째 automatic 으로 하셔도 되고 두번째 메뉴얼대로 진행해도 됩니다.

4. 테마의 원본파일을 참조합니다.  위치는 아래와 같습니다.

semantic/src/themes/default/globals/site.variables

5. 위 4번의 파일을 참조하여 사용자 오버라이딩(있는것 덮어쓰기) 하면 됩니다.  오버라이딩은 아래 경로의 파일에다가 입력하시면 됩니다.

semantic/src/site/globals/site.variables

6. 다 입력하고 난뒤 gulp 로 빌드를 합니다.  여기서 저는 css만 빌드할 것이기 때문에 아래처럼 했습니다.

$ gulp build-css

다른 옵션을 확인하시려면 semantic/gulpfile.js 을 열어서 확인하시면 됩니다.

7. semantic/dist 폴더에 css 파일이 생성되어 있을겁니다.  이 파일을 사이트에 적용하시면 됩니다.

끝~!