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 는 위의 command 를 통해서도 알 수 있듯이 _variables.scss 이다. 여기에 대부분의 변수들이 정의되어 있다. 그러므로 bootstrap 에서 변경할 내용은 여기서 변경하면 된다. _customVariables.scss
일단 app.scss 는 bootstrap.scss 를 그대로 copy 한 것이라서 path 가 맞지 않는다. 그러므로 일단 아래처럼 path 를 수정해 준다. app.scss
그리고 여기에 더해 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";
...
이제 scss 를 compile 해서 css 를 만들자. 아래처럼 하면 된다. compile 을 하면 결과가 standard output 으로 뿌려주기 때문에 >(파이프) 가 필요하다. compile
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
댓글 없음:
댓글 쓰기