- 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 |