bootstrap 만 쓰다가 semantic-ui 가 예뻐서 사용해 봤습니다. 만족스럽더군요.
한참 프로젝트를 진행하다 폰트를 바꿀일이 있어 살펴보니 각 엘리먼트마다 font-family가 지정되어 있었습니다.
이걸 다 어떻게 바꾸지 하고 멘붕이 왔습니다.
다행히 Theming 이라는 테마변경 기능이 존재했습니다. 하지만 첨 해보는 gulp 도 알아야하고 뭔가 좀 복잡하더군요.
어떻게 꾸역꾸역 하긴 했는데 gulp build 에서 넘어가지가 않고 계속 멈춰 있습니다. ㅜㅜ
반나절을 씨름하다 검색에 검색을 해보니 semantic-ui 자체의 에러였습니다 ㅜㅜ 오래된 버그인데 고칠생각을 안하고 있더라구요.
해외유저도 열받았는지 fomantic-ui라고 Fork 한 프로젝트가 이것을 해결해 놨네요. 해외유저들 후덜덜...
암튼 하는 방법 알려드립니다.
1. 일단 폴더하나를 만듭니다. 저는 test 라고 했습니다
$ mkdir test2. npm 초기화를 합니다
$ npm init3. 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 파일이 생성되어 있을겁니다. 이 파일을 사이트에 적용하시면 됩니다.
끝~!
