Bootstrap5のviteを使用したsassのカスタムについて

Bootstrap5とViteの設定について

Bootstrap5には、Viteの環境構築の方法が公式ドキュメントに記載されていますが、Bootstrap5のsassカスタム変数を変更してcssクラスを対応したい場合の方法については記載されていせん。

下記から解説していきます。

・公式ドキュメントURL
https://getbootstrap.jp/docs/5.3/getting-started/vite/

Bootstrap5とは

Bootstrap 5は、HTML、CSS、JavaScriptを用いてウェブサイトやウェブアプリケーションのユーザーインターフェイスを効率的に構築するためのフロントエンドフレームワークで、もともと旧Twitter社によって開発され、現在では世界中で広く利用されています。

Viteとは

Vite（ヴィート）は、Vue.jsの作者であるEvan You氏によって2020年に開発された、次世代のフロントエンドビルドツールで、フランス語で「速い」という意味を持つ名前通り、開発者体験（DX）の向上を目的としており、高速な開発サーバーや効率的な本番ビルドを提供する開発ツールです。

sassカスタム変数設定方法

公式ドキュメントの通り進めると下記のようなディレクトリ構造になります。

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

vite.config.jsとnpm scriptを設定した状態で、src/scss/_custom.scssフォルダを作成します。既存のsassフォルダを別ファイルにして、styles.scssでまとめると保守しやすくなります。
ここでは、独自のsassファイルを_main.scssにして、Bootstrap5のカスタム変数用のファイルを_custom.scssで作成しました。

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   |   └── _custom.scss
|   |   └── _main.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

_custom.scssの中身ですが、node_modulesのbootstrapの変数が記載されているコードを記載します。

node_modules/bootstrap/scss/_variables.scss

先にbootstrapのfunctionsファイルをインポートして、その後bootstrapのsassの変数を修正します。最後に必要なファイルをインポートすると完成です。

ファイル容量を少なくしたい場合は、不必要なインポートを避けることで対処できます。

・例

//functionsファイルをインポート
@import "bootstrap/scss/functions";

// 変数の書き換え
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #374038 !default; //修正
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

// 必要なファイルのインポート
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/close";

// Utilities
@import "bootstrap/scss/utilities/api";

以上です。