Sass gebruiken in React

Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Sass (syntactisch geweldige stijlbladen) is een uitbreiding van CSS met extra functies die het krachtiger maken. Het beste van Sass is de compatibiliteit met CSS, wat betekent dat je het kunt gebruiken in je webontwikkelingsprojecten met JavaScript-frameworks zoals React.

In tegenstelling tot vanilla CSS heb je echter een klein beetje setup nodig om Sass te gebruiken. Ontdek hoe dit werkt door een eenvoudig React.js-project op te zetten en Sass ermee te integreren.

Sass gebruiken in uw React.js-project

Net als andere CSS-processors wordt Sass niet standaard ondersteund door React. Om Sass in React te gebruiken, moet u een afhankelijkheid van derden installeren via een pakketbeheerder zoals garen of npm.

U kunt controleren of npm of garen op uw lokale computer is geïnstalleerd door te draaien npm --versie of garen --versie. Als u geen versienummer in uw terminal ziet, npm installeren of eerst garen.

instagram viewer

Maak een React.js-project

Om deze handleiding te volgen, kunt u een eenvoudige React.js-app instellen met behulp van create-react-app.

Gebruik eerst een opdrachtregel om naar de map te navigeren waarin u uw React-project wilt maken. Ren dan npx maak-reageer-app . Zodra het proces is voltooid, voert u de app-directory in met behulp van CD . Voeg de volgende inhoud toe aan uw App.js bestand als starter:

importeren Reageer van "Reageer"; 
importeren "./App.scss"; 
functieapp() { 
opbrengst ( 
<div className="wikkel">
<h1>Sass gebruiken in Reageren</h1>
<koptekst className="wikkel__btns">
<knop>Blauwe knop</button>
<knop>Rode knop</button>
<knop>Groene knop</button>
</header>
</div> ); 
} 
exporterenstandaard App;

Als je eenmaal een basis React-project hebt opgezet, is het tijd om Sass te integreren.

Sas installeren

U kunt Sass installeren via npm of garen. Installeer het via garen door te rennen garen voeg sass toe of, als je de voorkeur geeft aan npm, ren npm installeren sass. Uw pakketbeheerder voegt de nieuwste versie van Sass toe aan de lijst met afhankelijkheden in de projecten pakket.json bestand.

Hernoem .css-bestanden naar .scss of .sass

Hernoem in de projectmap App.css en index.css naar respectievelijk App.scss en index.scss.

Nadat u de naam van die bestanden hebt gewijzigd, moet u de importbestanden in uw App.js- en index.js-bestanden als volgt bijwerken zodat ze overeenkomen met de nieuwe bestandsextensies:

importeren "./index.scss";
importeren "./App.scss";

Vanaf dit punt moet u de extensie .scss gebruiken voor elk stijlbestand dat u maakt.

Variabelen en mixins importeren en gebruiken

Een van de belangrijkste voordelen van Sas is dat het je helpt schone, herbruikbare stijlen te schrijven met behulp van variabelen en mixins. Hoewel het misschien niet duidelijk is hoe je hetzelfde kunt doen in React, verschilt het niet zo veel van het gebruik van Sass in projecten die zijn geschreven met gewoon JavaScript en HTML.

Maak eerst een nieuwe aan stijlen map in je src map. Maak twee bestanden in de map Stijlen: _variabelen.scss En _mixins.scss. Voeg de volgende regels toe aan _variables.scss:

$achtergrondkleur: #f06292;
$ tekstkleur: #f1d3b3;
$btn-breedte: 120px;
$btn-hoogte: 40px;
$block-padding: 60px;

En voeg het volgende toe aan _mixins.scss:

@mixin verticale lijst {
 weergeven: flex;
 items uitlijnen: centreren;
 flex-richting: kolom;
}

Importeer vervolgens variabelen en mixins in App.scss als volgt:

@importeren "./Stijlen/variabelen";
@importeren "./Stijlen/mixins";

Gebruik uw variabelen en mixins in het bestand App.scss:

@importeren "./Stijlen/variabelen.scss";
@importeren "./Stijlen/mixins";
.wikkel {
 achtergrondkleur: $achtergrondkleur;
 kleur: $tekstkleur;
 opvulling: $block-padding;

&__btns { @erbij betrekken verticaal-lijst; knop { breedte: $btn-breedte; hoogte: $btn-hoogte; } } }

Zo gebruik je variabelen en mixins in React. Naast mixins en variabelen kun je ook alle andere geweldige functies in Sass gebruiken, zoals functies. Er is geen beperking.