Hur man Importerar en Sass-Fil till Varje Vue Komponent i en App

0
21

Om du arbetar på en stor skala Vue ansökan, är chansen att någon gång kommer du att vilja organisera strukturen av din ansökan så att du har några globalt definierade variabler för CSS som du kan använda i någon del av din ansökan.

Detta kan åstadkommas genom att skriva denna bit kod för varje komponent i din ansökan:

<style src=”scss”>
@import “./stilar/_variables.scss”;
</style>

Men vem har tid för det?! Vi är programmerare, låt oss göra detta automatiskt.

Varför?

Du kanske undrar varför vi vill göra något liknande, särskilt om du är nybörjare inom webbutveckling. Globals är dåliga, eller hur? Varför skulle vi behöva det? Vad som även är Sass variabler? Om du redan vet allt detta, då kan du hoppa ner till nästa avsnitt för genomförandet.

Företag stora och små tenderar att ha nykonstruktioner minst varje en-till-två år. Om din kodbas är stor, hanteras av många människor, och du behöver ändra line-height överallt, från 1,1 rem till 1,2 rem, tror du verkligen vill ha för att gå tillbaka till varje modul och ändra detta värde? En global variabel blir oerhört användbart här. Du bestämmer vad som kan vara på topp-nivå och vad som måste ärvas av andra, mindre bitar. Detta undviker spaghetti-kod i CSS och håller din kod TORR.

Jag en gång arbetade för ett företag som hade en gigantisk, spretande kodbasen. En dag innan en större utgåva, order kom ner från ovan att vi fick ändra vår främsta varumärke färg. Eftersom codebase var att ställa sig väl med dessa typer av variabler definieras på rätt sätt, jag var tvungen att ändra färgen på en plats, och det fortplantas genom 4,000 filer. Det är ganska kraftfull. Jag kunde inte dra en all-nighter för att få förändring genom att i tid.

Formatmallar är om design. Bra design är, av naturen, framgångsrika när det är sammanhängande. En kodbas som återanvänder gemensamma delar av strukturen kan se mer enat, och tenderar också att titta mer professionell. Om du behöver ändra några bas bitar av din ansökan i varje komponent, kommer det att börja bryta ner, precis som en fras betyder i ett klassiskt spel för telefon.

Globala definitioner kan vara egenkontroll för designers: “Vänta, vi har annan eftergymnasial knappen? Varför?” Läckor i sammanhållna UI/UX meddela sig väl i denna modell.

Hur?

Det första vi behöver är att ha vue-cli 3 är installerat. Då kan vi skapa våra projekt:

npm install-g @vue/cli
# ELLER
garn globala lägg till @vue/cli

# kör sedan detta till schavotten projektet
vue skapa scss-loader-exempel

När vi kör det här kommandot för att vi kommer att se till att vi använder den mall som har Sass alternativ:

? Vänligen välj en förinställning: välj Manuellt funktioner
? Kontrollera funktioner som behövs för att ditt projekt:
◉ Babel
◯ TypeScript
◯ Progressiva Web App (PWA) Stöd
◯ Router
◉ Vuex
“◉ CSS Pre-processorer
◉ Linter / Formatter
◯ Enhetstestning
◯ E2E Testning

De andra alternativen är upp till dig, men du behöver CSS Pre-processorer alternativet är markerat. Om du har en befintlig vue cli-3 projektet, har ingen rädsla! Du kan också köra:

npm jag node-sass sass-loader
# ELLER
garn lägg till nod-sass sass-loader

Första, låt oss göra en ny mapp i src-katalog. Jag ringde min stilar. Inne i den, jag skapade en _variables.scss-fil, som du skulle se i populära projekt som bootstrap. För nu, jag bara satt en enda variabel inne i den för att testa:

$primary: lila,

Nu, låt oss skapa en fil som heter vue.config.js vid roten av projektet på samma nivå som ditt paket.json. I det, vi kommer att ange vissa inställningar. Du kan läsa mer om denna fil här.

Inne i det, vi kommer att lägga till i att importera uttalande som vi såg tidigare:

modulen.exporten = {
css: {
loaderOptions: {
sass: {
data: `@import “@/styles/_variables.scss”;`
}
}
}
};

OK, ett par viktiga saker att notera här:

  • Du kommer att behöva stänga och starta om din lokala utvecklings-server för att göra något av dessa förändringar tar nya tag.
  • Som @/ i katalogstrukturen innan stilar kommer att tala om denna konfigurationsfil för att titta på src-katalog.
  • Du behöver inte understreck i namnet på filen för att få detta att fungera. Detta är en Sass namngivning.
  • De komponenter som du importerar till behöver src=”scss” (eller sass, eller mindre, eller vad preprocessor du använder) attributet på stil tag i den .vue enkel-filen för komponenten. (Se exempel nedan).

Nu kan vi gå in i vår standard App.vue komponent och börja använda vårt globala variabler!

<style src=”scss”>
#app {
font-family: “Avenir”, Helvetica, Arial, sans-serif;
-webkit-text-utjämning: kantutjämningen;
-moz-osx-font-utjämning: gråskala;
text-align: center;
//det är där vi använder variabeln
färg: $primary;
margin-top: 60 px;
}
</style>

Här är ett fungerande exempel! Du kan se texten i vår app lila:

Shout out till Ives, som skapade CodeSandbox, för att inrätta en särskild konfiguration för oss så att vi kunde se dessa förändringar i aktion i webbläsaren. Om du vill göra ändringar i den här sandlådan, det är en speciell Server Kontrollpanelen alternativet i den vänstra sidomenyn, där du kan starta om servern. Tack, Ives!

Och där har du det! Du har inte längre att göra den återkommande uppgiften av @import-ing samma variabler fil hela din Vue ansökan. Nu, om du behöver för att refaktorera utformningen av din ansökan, kan du göra det på en plats och det kommer att sprida throughoutyour app. Detta är särskilt viktigt för tillämpningar i stor skala.