Blazor, Bootstrap en SASS

7 Mei 2023
door Funs Janssen

Hoe je Bootstrap en SASS toe kunt voegen aan jouw Blazor project

Bootstrap is een populair framework voor het maken van responsieve en mobielvriendelijke websites. Sass is een uitbreiding van CSS die extra functies biedt, zoals variabelen, geneste regels, mixins en meer. Door Bootstrap en Sass te gebruiken in je Blazor-applicatie, kun je de stijl en het uiterlijk van je componenten verbeteren en aanpassen.

Om Bootstrap en Sass toe te voegen aan je Blazor-applicatie, moet je de volgende stappen volgen:

• Voeg bootstrap toe aan je project.
• Maak je eigen aangepaste stijl.
• Configureer de Sass compiler.

In deze blog zal ik je laten zien hoe je deze stappen kunt uitvoeren in een eenvoudige Blazor. Ik zal gebruik maken van Visual Studio als editor. Ik zal ook laten zien hoe je Sass kunt gebruiken om de standaardstijlen van Bootstrap aan te passen en om aangepaste stijlen toe te voegen aan je Blazor-componenten.

Bootstrap toevoegen

Wanneer je een project hebt aangemaakt kun je een client-side library toevoegen. Rechter muisklik op je project in Visual Studio. Vervolgens klik je op Add en dan Client-Side Library.

Vervolgens zoek je naar bootstrap en kies je de gewenste versie. Kies vervolgens voor specifieke bestanden en vink dan alleen de folders js en scss aan. Tot slot verander je de Target Location naar Styles/bootstrap. Klik dan op install zodat de bestanden in je project worden geladen.

Een aangepaste stijl maken

Maak een bestand genaamd site.scss aan in de nieuwe folder Styles. Kopieer vervolgens de inhoud van het bestand wwwroot/css/site.css naar het nieuwe bestand in de Styles folder. Vervolgens maak je nog een bestand aan genaamd _variables.scss. Hierin gaan we de bootstrap overrides plaatsen.

Voeg hiervoor de volgende regels toe aan dit nieuwe bestand. Zie de opmerkingen voor wat we precies veranderen aan de stijl. Voor alle mogelijke opties kun je de Bootstrap documentatie raadplegen.

@import 'bootstrap/scss/_functions';

// We veranderen de primaire kleur naar oranje.
$primary: #ff6a00;

// We maken een nieuwe variabele aan voor onze accent kleur.
$accent: #0066ff;

// We veranderen de border radius van bootstrap knoppen.
$btn-border-radius: 0px;

@import 'bootstrap/scss/_variables';

// Vervolgens voegen we de kleur toe aan de bootstrap map.
$theme-colors: map-merge($theme-colors, ( "primary": $primary, "accent": $accent ));

Om deze aangepaste variabelen te gebruiken voegen we aan site.scss nog de volgende regels toe. We plaatsen deze helemaal aan het begin van dit bestand.

@import '_variables.scss';
@import 'bootstrap/scss/bootstrap.scss';    

Sass Compiler Configureren

Wat we nu gaan doen is de SASS compiler configureren in Visual Studio. Hiervoor voegen we de volgende extensie toe: Web Compiler 2022+. Nadat je deze hebt gedownload in het extensie venster zul je Visual Studio opnieuw moeten opstarten.

Wanneer de extensie geïnstalleerd is klik je met de rechtermuisknop op het bestand Styles/site.scss. Vervolgens kies je Web Compiler en dan Compile File. Er is nu een compilerconfig.json bestand aangemaakt. Open deze en verander het outputFile pad naar wwwroot/css/site.css. Dit zorgt ervoor dat de css file in je wwwroot komt te staan.

Naast een site.css genereert de web compiler ook een minified file. Deze kun je het beste gebruiken in je applicatie. Open hiervoor Pages/_Host.cshtml. In deze file verwijder je de regel waarin bootstrap.min.css wordt toegevoegd en verander je de regel met css/site.css naar css/site.min.css.

Tot slot is er nu nog 1 handige optie die je aan wilt zetten. Namelijk compile on build. Dit zorgt ervoor dat de compiler altijd draait tijdens een build. Hiervoor klik je met de rechtermuisknop op compilerconfig.json en dan Web Compiler en vervolgens Enable compile on build… Dit zorgt ervoor dat er een NuGet package aan je project wordt toegevoegd.

Wanneer je nu de Blazor site start zul je zien dat de stijl van bootstrap componenten is gewijzigd. Zie als voorbeeld de counter knop. De kleur is oranje en de hoeken zijn niet meer rond.

Bedankt voor het lezen! Voor meer informatie kun je kijken op getbootstrap.com

Funs Janssen

Als softwareontwikkelaar en architect met 8 jaar ervaring in de IT, ben ik gepassioneerd over het creëren van innovatieve oplossingen. Mijn technische vaardigheden omvatten het ontwerpen en implementeren van robuuste softwarearchitecturen, het optimaliseren van prestaties en het oplossen van complexe technische uitdagingen. Hulp nodig bij Web Development? Neem dan contact op.