Hvordan å Importere en Sass-Filen til Ethvert Vue Komponent i en App

0
17

Hvis du jobber på en stor skala Vue programmet, sjansene er på enkelte punkt du kommer til å ønske å organisere struktur av søknaden din, slik at du har noen globalt definerte variabler for CSS-som du kan gjøre bruk av i hvilken som helst del av programmet.

Dette kan gjøres ved å skrive denne delen av koden inn i hver komponent i programmet:

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

Men hvem har tid til det?! Vi er programmerere, la oss gjøre dette programmatisk.

Hvorfor?

Du lurer kanskje på hvorfor vi ønsker å gjøre noe som dette, spesielt hvis du er bare starter ut på web-utvikling. Globals er dårlig, ikke sant? Hvorfor trenger vi dette? Hva er Sass variabler? Hvis du allerede vet alt dette, så kan du hoppe ned til neste avsnitt for gjennomføring.

Bedrifter store og små har en tendens til å ha designendringer minst hver en-til-to år. Hvis koden din base er store, administrerte av mange mennesker, og du trenger å endre linje-høyde over alt fra 1.1 rem til å 1.2 rem, har du virkelig lyst til å gå tilbake til hver modul, og endre denne verdien? En global variabel blir usedvanlig nyttig her. Du bestemmer hva kan være på øverste nivå, og hvilke behov for å bli arvet av andre, mindre biter. Dette unngår spaghetti-kode i CSS og holder koden din TØRR.

Jeg en gang jobbet for et firma som hadde en gigantisk, viltvoksende codebase. En dag før en stor utgivelse, og ordrer som kom ned fra over at vi var endre våre primære merke farge. Fordi codebase ble satt opp godt med disse typer av variabler som er definert på riktig måte, jeg måtte endre farge på ett sted, og det forplantet seg gjennom 4,000-filer. Det er ganske kraftig. Jeg også trengte ikke å trekke en all-natts å få det endrer seg utover i tid.

Stiler er om design. God design er, av natur, vellykket når det er fornuftig. En codebase som gjenbruker felles deler av strukturen kan se mer united, og også en tendens til å se mer profesjonelle. Hvis du har til å omdefinere noen base deler av programmet i hver komponent, det vil begynne å bryte ned, akkurat som en frase gjør i et klassisk spill av telefon.

Globale definisjoner kan være selv-kontroll for designere samt: “Vent, vi har en annen universitets-knappen? Hvorfor?” Lekkasjer i sammenhengende UI/UX kunngjøre seg godt i denne modellen.

Hvordan?

Det første vi trenger er å ha vue-cli 3 installert. Deretter lager vi vårt prosjekt:

npm installere -g @vue/cli
# ELLER
garn global legge @vue/cli

# klikk kjør dette til stillaset prosjektet
vue opprette scss-loader-eksempel

Når vi kjører denne kommandoen, vi kommer til å sørge for at vi bruker malen, som har Sass alternativ:

? Vennligst velg en forhåndsinnstilling: Manuelt valg av funksjoner
? Sjekk de funksjoner som trengs for prosjektet:
◉ Babel
◯ Maskinskrevet kopi
◯ Progressive Web App (PWA) Støtte
◯ Ruter
◉ Vuex
“◉ CSS Pre-prosessorer
◉ Linter / Formatter
◯ Enhetstesting
◯ E2E Testing

De andre alternativene er opp til deg, men du trenger CSS Pre-prosessorer alternativet er avmerket. Hvis du har en eksisterende vue cli-3-prosjektet, har ingen frykt! Du kan også kjøre:

npm jeg node-sass sass-lasteren
# ELLER
garn legg til-node-sass sass-lasteren

Først, la oss lage en ny mappe i src-katalogen. Jeg ringte min stiler. På innsiden av det, jeg har opprettet en _variables.scss-fil, som du ville se i populære prosjekter som bootstrap. For nå, jeg bare sette en enkelt variabel innsiden av det for å teste:

$primær: purple;

Nå, la oss opprette en fil som heter vue.config.js ved roten av prosjektet på samme nivå som din pakke.json. I det vi kommer til å definere noen av konfigurasjonsinnstillingene. Du kan lese mer om dette-fil her.

Inne i det, vil vi legge til at import uttalelse som vi så tidligere:

modul.eksport = {
css: {
loaderOptions: {
sass: {
data: `@import “@/stiler/_variables.scss”;`
}
}
}
};

OK, et par viktige ting å merke seg her:

  • Må du stenger ned og starter opp lokal utvikling-server for å gjøre noen av disse endringene ta tak.
  • Som @/ i katalogstrukturen før stiler vil fortelle denne konfigurasjonsfilen å se i src-katalogen.
  • Du trenger ikke understrek i navnet på filen for å få dette til å fungere. Dette er en Sass naming convention.
  • Komponentene du ønsker å importere til trenger lang=”scss” (eller sass, eller mindre, eller hva preprocessor du bruker) – attributtet på stil merke i .vue enkelt fil komponent. (Se eksempel nedenfor).

Nå, vi kan gå inn i våre standard-Appen.vue komponent og begynne å bruke vårt globale variabelen!

<style lang=”scss”>
#app {
font-family: “Avenir”, Helvetica, Arial, sans-serif;
-webkit-font-utjevning: antialiased;
-moz-osx-font-utjevning: gråtoner;
text-align: center;
//dette er hvor vi bruker variabelen
farge: $primære;
margin-top: 60px;
}
</style>

Her er en fungerende eksempel! Du kan se teksten i vår app slå lilla:

Shout out til Ives, som skapte CodeSandbox, for å sette opp en spesiell konfigurering, for oss så vi kunne se disse endringene i aksjon i nettleseren. Hvis du ønsker å gjøre endringer til denne sandkassen, det er en spesiell Server Kontrollpanel alternativ i venstre sidebar, der du kan starte serveren på nytt. Takk, Ives!

Og der har du det! Du ikke lenger trenger å gjøre repetitive oppgaven @import-ing samme variablene fil gjennom hele Vue-programmet. Nå, hvis du trenger å refactor utformingen av søknaden din, kan du gjøre alt på ett sted, og det vil spre throughoutyour app. Dette er spesielt viktig for programmer på skalaen.