[vue.js, bootstrap5] scss/sass 활용하여 bootstrap 플러그인 커스터마이징

부트스트랩에서 제공하는 기능을 사용하다보면 커스터마이징 하고싶은일이 발생합니다.

 

저의경우 부트스트랩의 dropdown 플러그인을 사용하던도중 width를 커스터마이징 하고싶었습니다

 

https://getbootstrap.kr/docs/5.0/components/dropdowns/

드롭다운

위 링크의 드롭다운을 사용하는데 좌우 길이가 너무 길어 공백이 생기는것이 마음에 안들었습니다.

커스터마이징 하고싶었던 dropdown의 width

<ul class="dropdown-menu">
  <li class="dropdown-header">
    <h6>Filter</h6>
  </li>
  <li><a class="dropdown-item" href="#">Today</a></li>
  <li><a class="dropdown-item" href="#">Week</a></li>
  <li><a class="dropdown-item" href="#">Month</a></li>
</ul>

코드는 이런식이고, 해당 코드를 통해 bootstrap 플러그인중 하나인 dropdown-menu, dropdown-item을 통해 드롭다운 기능을 사용한것은 좋았는데, 좌우가 너무 비어보여서 줄이고싶었습니다.

 

bootstrap5 plugin 의 min-width: 10rem; 이 default여서 발생한 문제

bootstrap plugin의 scss가 적용되어 나타난 현상이라 css에서 건들수가 없었습니다.

드롭다운 문서의 아래쪽을 보면

Sass에서 사용하는 변수를 알려줍니다. 거기서 제가 원하던 $dropdown-min-width 를 찾을수 있었습니다.

 

부트스트랩에서 사용하는 모든 변수는 bootstrap/scss/_variables.scss 에 있습니다.

 

 

https://getbootstrap.kr/docs/5.1/customize/sass/

Sass

부트스트랩5 Sass 문서를 참고해서 따라해보면,

 

이런 파일구조를 만들기를 권장합니다. vue.js 유저라면 npm package manager를 통해 node_mudules 폴더구조 위와 동일하고, cscc 폴더와 custom.scss 파일을 생성했습니다.

만약 아직 부트스트랩을 설치하지 않으셨다면

npm install bootstrap

을 프로젝트 폴더에서 입력해 설치해주셔야 합니다

frontend project에 scss폴더 생성후 custom.scss 생성

똑같이 따라서 만든다음 @import "bootstrap경로" 를 해주고, 원하는 변수를 변경해주면 됩니다.

 

그후 scss 적용은 프로젝트 구조마다 조금씩 다를것이라고 예상됩니다.

 

저의 경우 vue.js 프로젝트의 main.js 에 해당 scss를 import 해주었습니다.

 

vue.js 의 main.js에 import

 

dropdown의 min-width가 6rem으로 변경된 모습

와! scss!