- Bootstrap theme change



* node-sass (SCSS -> CSS , 컴파일(변환)) 설치
npm install -g node-sassnpm i -D -g node-sass


* bootstrap 다운로드
https://github.com/twbs/bootstrap
- 최신버전을 다운로드해서 압축을 푼다.
- Laravel의 경우 : resource/asset/libs/


bootstrap-new.scss 파일 작성
- v4.3.1 의 경우
- resource/asset/libs/bootstrap-4.3.1/bootstrap-new.scss 파일 생성
@import "./scss/bootstrap";


* 컴파일
- 외부로 서비스 경로 : public/libs/bootstrap-4.3.1/css 
node-sass bootstrap-new.scss ../../../../public/libs/bootstrap-4.1.3/css/bootstrap.css

- 파일 변경을 감지해서 자동으로 컴파일 옵션 : --watch
node-sass --watch main.scss main.css



//========================
* 글자 폰트 크기 줄이기
_variables.scss 파일 
$font-size-base: 1rem; // 16px
-> 0.9rem //14px



* 버튼색 변경
$primary: $blue





//=============================
//
https://getbootstrap.com/docs/4.3/getting-started/theming/
https://uxplanet.org/how-to-customize-bootstrap-b8078a011203


반응형

'Code > Web' 카테고리의 다른 글

Sass 사용법  (0) 2019.04.12
WebPack 사용법  (0) 2019.04.12
Microsoft CDN  (0) 2019.03.08
[AWS] EBS 디스크 용량 늘리기  (0) 2019.02.24
[VS Code Extension] Debugger for Chrome 사용법  (0) 2019.02.16
Posted by codens