부트 스트랩 SCSS 사용해보기

npm init -y

하면 package.json 생성

npm install bootstrap@next

하니 에러가 떠서

npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap@next.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Son\AppData\Roaming\npm-cache\_logs\2022-01-29T13_23_57_623Z-debug.log

 

 

npm install bootstrap

입력하니node_moudles 파일이 생겼다.

npm install bootstrap-icons

 

npm WARN bootstrap@5.1.3 requires a peer of @popperjs/core@^2.10.2 but none is installed. You must install peer dependencies yourself.

+ bootstrap-icons@1.7.2
added 1 package from 1 contributor and audited 2 packages in 2.381s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

 

scss이름으로 새 폴더 만들고

하위에 main.scss파일 만듦

 

 

  "liveSassCompile.settings.formats": [
    {
      //"format": "expanded",
      "format": "compressed",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.generateMap": false,

설정 추가

Watch Sass 클릭 

 

이 파일을 리스닝 하게 만듦

@import "../node_modules/bootstrap/scss/bootstrap.scss";

 

저런 식으로 작성하면 bootsrap.scss 파일 내용을 모두 import하고

추가로 

$primary: #401f7c;

사용자 커스텀한 내용까지

 

 컴파일하게 된다.

 

버튼 배경색에 따라 버튼글자색 바꿔주는 기능은 mixins

border-radius 없애고 싶을 땐 위와 같이

 

패딩을 조절하고 싶을땐

class=" p-2" 와 같이 숫자를 변경해줘도 되지만

_utilites.scss에서 볼수 있다.

 

values: $spacers 에 해당하는건

여기서 볼 수 있다.

 

_ 언더바로 파일명 만들면

@import할때 파일명만 써주면된다.

그리드 만들때 breakpoint를 잘 활용하여 반응형 웹을 만들어 보자

 

 

참고영상:

https://www.youtube.com/watch?v=WlOBV00NldU