[RUBY] [Rails 6] Passen Sie Bootstrap in der Rails + Bootstrap 5.0.0-Alpha-Umgebung an

• Dies ist Qiitas erster Beitrag. Vielen Dank.

Bootstrap wurde in vielen Projekten als CSS-Framework eingeführt. Im Juni 2020 wurde 5.0 Alpha als Hauptversions-Upgrade veröffentlicht.

Wenn es mit den Standardeinstellungen verwendet wird, wird es häufig von dem seit vielen Jahren verwendeten Framework übernommen. Es wird manchmal als "Bootstrap-Geruch" verspottet, Es ist möglich, die Benutzeroberfläche flexibel zu ändern, indem Sie sie anpassen.

Diesmal in Bootstrap 5.0, das von Webpacker in der Rails 6.0-Umgebung eingeführt wurde, Erfahren Sie, wie Sie jede Variable anpassen.

Überblick

Überschreiben und ändern Sie den in Bootstrap festgelegten Wert von _variables.scss aus einer anderen Datei.

Referenzen / Artikel

Die im folgenden Artikel vorgestellte Methode ist eine Anwendungsmethode beim Verwalten von CSS mit Webpacker.

http://koyacch.hatenablog.com/entry/2018/02/23/162213

Ich verweise auch auf die Methode, die auf der offiziellen Seite des unten stehenden Links vorgestellt wurde.

https://v5.getbootstrap.com/docs/5.0/customize/sass/

Annahme

--Css wird vom Webpacker in den Rails-Einstellungen verwaltet. (In diesem Artikel wird davon ausgegangen, dass app / javascript / src / application.scss platziert ist.) --Bootstrap wird mit einem Paketmanager (z. B. Garn) installiert. (In diesem Artikel wird davon ausgegangen, dass node_modules / bootstrap installiert ist.)

Einrichtungsschritte

Kopieren Sie die Dateien in app / node_modules / bootstrap

Kopieren Sie bootstrap.scss und _variables.scss in app / node_modules / bootstrap und fügen Sie sie in den Ordner app / javascript / src ein.

Benennen Sie die Datei in app / javascript / src um

app / javascript / src / bootstrap.scss finden Sie in _bootstrap-custom.scss app / javascript / src / _variables.scss benennt die Datei in _bootstrap-custom-variables um.

Einstellungen in application.scss

Schreiben Sie den folgenden Code in app / javascript / src / application.scss.

application.scss

@import 'bootstrap-custom';

_bootstrap-custom.scss Einstellungen

Bearbeiten Sie app / javascript / src / _bootstrap-custom.scss wie folgt.

Vorher ändern

_bootstrap-custom.scss

@import "~bootstrap/scss/variables";

Nach der veränderung

_bootstrap-custom.scss

/* @import "~bootstrap/scss/variables";
 */
@import "bootstrap-custom-variables";

So passen Sie an

Es kann angepasst werden, indem jede Variable in app / javascript / src / _bootstrap-custom-variables geändert wird.

Da viele Variablen festgelegt sind, ist es möglich, die ursprüngliche Benutzeroberfläche abhängig von den Änderungen einheitlich anzuwenden.

Beispiel: Wenn Sie die Gesamtschriftgröße reduzieren möchten

Vorher ändern

_bootstrap-custom-variables

$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`

Nach der veränderung

_bootstrap-custom-variables

$font-size-base: 0.9 rem !default;

Am Ende

Das snowwshiro, das ich derzeit verwende, hat aufgrund der minimalen Anpassung ein Bootstrap-ähnliches Finish, aber ich arbeite hart daran, es für die Erneuerung in diesem Herbst anzupassen. ist.