Het Importeren van een Sass-Bestand in Elke Vue Component in een App

0
20

Als je werkt op een grote schaal Vue toepassing, is de kans op een bepaald punt bent u gaat te willen om het organiseren van de structuur van uw toepassing, zodat je wat globaal gedefinieerde variabelen voor CSS die je kunt gebruik maken van in elk onderdeel van uw aanvraag.

Dit kan worden bereikt door het schrijven van dit stukje code in elk onderdeel in uw toepassing:

<style lang=”scss”>
@import “./styles/_variables.scss”;
</style>

Maar wie heeft er tijd voor?! We programmeurs, laten we dit doen in het programma.

Waarom?

U vraagt zich misschien af waarom we zouden willen doen met iets als dit, vooral als je net begint in web ontwikkeling. Globals zijn slecht, toch? Waarom zouden we dit nodig? Wat zijn de Sass variabelen? Als u dat allemaal weten, dan kunt u doorgaan naar de volgende sectie voor de uitvoering.

Bedrijven, groot en klein hebben de neiging om de vernieuwde minstens elke een tot twee jaar. Als uw code base is groot, dat beheerd wordt door veel mensen, en je moet het wijzigen van de line-height overal van 1.1 rem 1,2 rem, heb je echt wilt om terug te gaan in elke module en wijziging die waarde? Een algemene variabele wordt buitengewoon nuttig hier. U bepaalt wat u op het hoogste niveau en wat er moet worden overgenomen door andere, kleinere stukken. Dit voorkomt spaghetti code in CSS en houdt uw code DROOG.

Ik heb ooit gewerkt voor een bedrijf dat was een gigantische, uitgestrekte codebase. Een dag voor een grote uitgave, bestellingen van boven afkwamen waren dat we het veranderen van onze primaire merk kleur. Omdat de codebase werd opgericht en met deze soorten variabelen gedefinieerd juist, ik had de kleur te veranderen op een locatie, en het doorgegeven via 4.000 bestanden. Dat is vrij krachtig. Ik ook niet trekken een all-nighter om de verandering in de tijd.

Stijlen zijn over het ontwerp. Een goed ontwerp is, door de natuur, succesvol als het is samenhangend. Een codebase die hergebruikt gemeenschappelijke stukken van de structuur kan er meer verenigd is, en ook de neiging om meer professioneel. Als u voor het herdefiniëren van een aantal basis onderdelen van uw applicatie in elk onderdeel, het zal beginnen af te breken, net als een zin heeft in een klassiek spel van de telefoon.

Globale definities kunnen worden self-checking voor ontwerpers ook: “Wacht, we hebben een andere tertiaire knop? Waarom?” Lekken in samenhang UI/UX kondigen zich goed in dit model.

Hoe?

Het eerste wat we nodig hebben, vue-cli 3 is geïnstalleerd. Daarna maken we ons project:

npm installeren -g @vue/cli
# OF
garen global toevoegen @vue/cli

# voer deze aan de steiger van het project
vue maken scss-loader-voorbeeld

Wanneer we deze opdracht uitvoert, gaan wij ervoor zorgen dat we gebruik maken van het sjabloon dat heeft de Sass optie:

? Kies een voorinstelling: het Handmatig selecteren van functies
? Controleer de functies die nodig zijn voor uw project:
◉ Babel
◯ TypeScript
◯ Progressieve Web App (PWA) Ondersteuning
◯ Router
◉ Vuex
“◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testen
◯ E2E-Testen

De andere opties zijn aan u, maar u moet de CSS Pre-processors optie ingeschakeld te laten. Als u een bestaande vue cli 3 project, heb geen angst! U kunt ook:

npm ik node-sass sass-loader
# OF
garen knooppunt toevoegen-sass sass-loader

Laten we eerst een nieuwe map in de map src. Ik belde mijn stijlen. De binnenkant van dat, ik heb een _variables.scss bestand, zoals je zou zien in de populaire projecten zoals bootstrap. Voor nu, ik heb net een enkele variabele binnenkant van het te testen:

$primair: purple;

Nu, laten we een bestand genaamd vue.config.js aan de basis van het project op hetzelfde niveau als uw pakket.json. In het, we gaan definiëren van een aantal configuratie-instellingen. U kunt meer lezen over dit dossier hier.

De binnenkant van het, voegen we in dat de invoer instructie die we eerder al zagen:

de module.export = {
css: {
loaderOptions: {
sass: {
data: `@import “@/styles/_variables.scss”;`
}
}
}
};

OK, een paar van de belangrijkste dingen om hier op te merken:

  • U moet afsluiten en opnieuw opstarten van uw lokale ontwikkeling server te maken van een van deze veranderingen plaatsvinden.
  • @/ In de directory-structuur voor het stijlen zal je vertellen dit configuratie bestand om te kijken in de src map.
  • U hoeft niet de underscore in de naam van het bestand om dit werk te krijgen. Dit is een Sass naamgeving.
  • De onderdelen die u importeert moet het lang=”scss” (of sass, of minder, of wat preprocessor u) kenmerk van de stijl tag in .vue één bestand component. (Zie het onderstaande voorbeeld).

Nu kunnen we verder gaan in onze standaard App.vue component in en start met behulp van onze globale variabele!

<style lang=”scss”>
#app {
font-family: “Avenir”, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: anti-aliasing toegepast;
-moz-osx-font-smoothing: grijstinten;
text-align: center;
//dit is waar wij het gebruik van de variabele
kleur: $primaire;
margin-top: 60px;
}
</style>

Hier is een voorbeeld werken! U kunt de tekst te zien in onze app paars:

Shout out naar Ives, die gemaakt CodeSandbox voor het opzetten van een speciale configuratie voor ons, dus we konden zien dat deze veranderingen in actie in de browser. Als u wilt wijzigingen aanbrengen aan deze zandbak, er is een speciale Server Control Panel optie in de linker zijbalk, waar u de server opnieuw opstarten. Bedankt, Ives!

En daar heb je het! U hoeft niet langer te doen, het repetitieve taak van de @import-ing van dezelfde variabelen-bestand voor de hele Vue toepassing. Nu, als u nodig hebt om refactor het ontwerp van uw applicatie, u kunt het allemaal doen op één plek en zal het doorgeven throughoutyour app. Dit is vooral van belang voor toepassingen in de schaal.