in English

Bygg verktøy

Lær hvordan du bruker Bootstraps inkluderte npm-skript for å bygge vår dokumentasjon, kompilere kildekode, kjøre tester og mer.

Verktøyoppsett

Bootstrap bruker npm-skript for byggesystemet sitt. Vår package.json inkluderer praktiske metoder for å jobbe med rammeverket, inkludert kompilering av kode, kjøring av tester og mer.

For å bruke byggesystemet vårt og kjøre dokumentasjonen lokalt, trenger du en kopi av Bootstraps kildefiler og Node. Følg disse trinnene og du bør være klar til å rocke:

  1. Last ned og installer Node.js , som vi bruker til å administrere avhengighetene våre.
  2. Enten last ned Bootstraps kilder eller fordel Bootstraps depot .
  3. Naviger til rotkatalogen /bootstrapog kjør npm installfor å installere våre lokale avhengigheter oppført i package.json .

Når du er ferdig, vil du kunne kjøre de forskjellige kommandoene fra kommandolinjen.

Bruker npm-skript

Vår package.json inneholder følgende kommandoer og oppgaver:

Oppgave Beskrivelse
npm run dist npm run distoppretter /dist/katalogen med kompilerte filer. Bruker Sass , Autoprefixer og terser .
npm test Kjører tester lokalt etter kjøringnpm run dist
npm run docs-serve Bygger og kjører dokumentasjonen lokalt.

Kjør npm runfor å se alle npm-skriptene.

Kom i gang med Bootstrap via npm med vårt startprosjekt! Gå til twbs/bootstrap-npm-starter-mallageret for å se hvordan du bygger og tilpasser Bootstrap i ditt eget npm-prosjekt. Inkluderer Sass-kompilator, Autoprefixer, Stylelint, PurgeCSS og Bootstrap-ikoner.

Sass

Bootstrap v4 bruker Node Sass for å kompilere våre Sass-kildefiler til CSS-filer (inkludert i byggeprosessen vår). For å ende opp med den samme genererte CSS-en når du kompilerer Sass ved hjelp av din egen eiendelspipeline, må du bruke en Sass-kompilator som støtter minst funksjonene som Node Sass gjør. Dette er viktig å merke seg fordi fra og med 26. oktober 2020 er LibSass og pakker bygget på toppen av det – inkludert Node Sass – avviklet .

Hvis du trenger nyere Sass-funksjoner eller kompatibilitet med nyere CSS-standarder, er Dart Sass nå den primære implementeringen av Sass og støtter et JavaScript API som er fullt kompatibelt med Node Sass (med noen få unntak oppført på Dart Sass GitHub-side ).

Vi øker Sass-avrundingspresisjonen til 6 (som standard er den 5 i Node Sass) for å forhindre problemer med nettleseravrunding. Hvis du bruker Dart Sass vil ikke dette være noe du trenger å justere, siden den kompilatoren bruker en avrundingspresisjon på 10 og av effektivitetsgrunner ikke tillater at den justeres.

Autoprefikser

Bootstrap bruker Autoprefixer (inkludert i byggeprosessen vår) for automatisk å legge til leverandørprefikser til noen CSS-egenskaper ved byggetidspunktet. Å gjøre det sparer oss for tid og kode ved å la oss skrive viktige deler av CSS-en vår én gang, samtidig som vi eliminerer behovet for leverandørmikser som de som finnes i v3.

Vi opprettholder listen over nettlesere som støttes gjennom Autoprefixer i en egen fil i vårt GitHub-lager. Se .browserslistrc for detaljer.

Lokal dokumentasjon

Å kjøre dokumentasjonen lokalt krever bruk av Hugo, som installeres via hugo-bin npm-pakken. Hugo er en lynrask og ganske utvidbar statisk nettstedgenerator som gir oss: grunnleggende inkluderer, Markdown-baserte filer, maler og mer. Slik kommer du i gang:

  1. Kjør gjennom verktøyoppsettet ovenfor for å installere alle avhengigheter.
  2. Fra rotkatalogen /bootstrap, kjør npm run docs-servepå kommandolinjen.
  3. Åpne http://localhost:9001/i nettleseren din, og voilà.

Lær mer om bruk av Hugo ved å lese dokumentasjonen .

Feilsøking

Skulle du støte på problemer med å installere avhengigheter, avinstaller alle tidligere avhengighetsversjoner (globale og lokale). Kjør deretter på nytt npm install.