[컴][웹] bootstrap .scss 에서 .css 만들기

부트스트랩/붓스트랩/ 부트스트랩 .scss 에서 .css 로 컴파일 / 빌드 /

bootstrap .scss 에서 .css 만들기

설치

아래 명령어들을 실행하자.

c:\> npm intall bootstrap
c:\> npm intall node-sass
c:\> mkdir scss
c:\> copy .\node_modules\bootstrap\scss\bootstrap.scss .\scss\app.scss
c:\> copy .\node_modules\bootstrap\scss\_variables.scss .\scss\_customVariables.scss

그러면 이제 아래와 같은 파일구조가 된다.

     sass +------> app.scss
          |
          +-----> _customVariables.scss

_customVariables.scss

_customVariables.scss 는 위의 command 를 통해서도 알 수 있듯이 _variables.scss 이다. 여기에 대부분의 변수들이 정의되어 있다. 그러므로 bootstrap 에서 변경할 내용은 여기서 변경하면 된다.

app.scss

일단 app.scss 는 bootstrap.scss 를 그대로 copy 한 것이라서 path 가 맞지 않는다. 그러므로 일단 아래처럼 path 를 수정해 준다.

그리고 여기에 더해 variables 를 @import 하는 것을 위에서 만든 _customVariables.scss 를 @import 하도록 하자.

/*!
 * Bootstrap v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@import "./node_modules/bootstrap/scss/functions";
@import "customVariables";
@import "./node_modules/bootstrap/scss/mixins";
...

compile

이제 scss 를 compile 해서 css 를 만들자. 아래처럼 하면 된다. compile 을 하면 결과가 standard output 으로 뿌려주기 때문에 >(파이프) 가 필요하다.

c:\> .\node_modules\.bin\node-sass.cmd .\scss\app.scss > .\result.css

만약 compressed version 을 만들고 싶다면 아래처럼 하면 된다.

c:\> .\node_modules\.bin\node-sass.cmd --output-style compressed .\scss\app.scss > .\result.css

See Aslo

• Bootstrap Magic : Generate your own Bootstrap themes quickly and easily