부트스트랩 - npm 프로젝트(커스터 마이징 방법)

기존 링크로 가져오는 방식은 사용자가 임의로 수정이 불가능 하였지만

npm 프로젝트로 가져와서 사용하는 방식은 커스터마이징이 가능하다.

사용자가 색상을 변경하는 방법

사이트: Sass · Bootstrap v5.0 (getbootstrap.com)

Sass

Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.

getbootstrap.com

필수 import 코드를 소스에 적용

컬러 가져오기

Color · Bootstrap v5.0 (getbootstrap.com)

Color

Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

getbootstrap.com

예제 코드

SCSS 파일

// 커스터 마이징을 위해서 필수 입력
// Required
@import "../node_modules/bootstrap/scss/functions"; // 함수
@import "../node_modules/bootstrap/scss/variables"; // 변수
@import "../node_modules/bootstrap/scss/mixins";    // 재활용할 코드

// 커스터 마이징할 위치
$theme-colors: (
  "primary":    $primary,
  // 사용자 지정색으로 변경
  "secondary":  yellowgreen,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

// bootstrap의 SCSS 기능 가져오기 (node_modules 폴더 내부에서 검색)
@import "../node_modules/bootstrap/scss/bootstrap.scss";

HTML 파일

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./scss/main.scss" />
  <script defer src="./main3.js"></script>
  <title>Document</title>
</head>
<body>
  
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
      aria-expanded="false">
      Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>

  <div class="spinner-border text-secondary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
  
</body>
</html>

확인

'프론트엔드 > Bootstrap' 카테고리의 다른 글

부트스트랩 - Optimize(필요한 기능만 가져와서 사용) (0)	2021.06.30
부트 스트랩 - npm 프로젝트 (0)	2021.06.30
부트 스트랩 - Components 사용 방법 (Tooltips) (0)	2021.06.29
부트 스트랩 - Components 사용 방법 (Modal) (0)	2021.06.28
부트 스트랩 - Forms 사용 방법 (0)	2021.06.28