in English

Tools bauen

Léiert wéi Dir Bootstrap's abegraff npm Scripte benotzt fir eis Dokumentatioun ze bauen, Quellcode ze kompiléieren, Tester auszeféieren, a méi.

Tooling Setup

Bootstrap benotzt npm Scripte fir säi Build System. Eis package.json enthält praktesch Methoden fir mam Kader ze schaffen, inklusiv Kompiléierungscode, Lafen Tester, a méi.

Fir eise Build System ze benotzen an eis Dokumentatioun lokal auszeféieren, braucht Dir eng Kopie vun de Bootstrap Quelldateien an Node. Follegt dës Schrëtt an Dir sollt prett sinn ze rocken:

  1. Eroflueden an installéieren Node.js , déi mir benotze fir eis Ofhängegkeeten ze managen.
  2. Entweder luet d'Bootstrap Quellen erof oder fork Bootstrap's Repository .
  3. Navigéiert an de Root /bootstrap-Verzeichnis a lafen npm installfir eis lokal Ofhängegkeeten ze installéieren, déi an package.json opgezielt sinn .

Wann Dir fäerdeg sidd, kënnt Dir déi verschidde Kommandoen aus der Kommandozeil ausféieren.

Benotzt npm Scripten

Eis package.json enthält déi folgend Kommandoen an Aufgaben:

Aufgab Beschreiwung
npm run dist npm run disterstellt den /dist/Dossier mat kompiléierten Dateien. Benotzt Sass , Autoprefixer , an Terser .
npm test Leeft Tester lokal no Lafennpm run dist
npm run docs-serve Baut a leeft d'Dokumentatioun lokal.

Run npm runfir all npm Scripten ze gesinn.

Start mat Bootstrap iwwer npm mat eisem Startprojet! Gitt op den twbs/bootstrap-npm-starter Template Repository fir ze kucken wéi Dir Bootstrap an Ärem eegene npm Projet bauen an personaliséiere kënnt. Enthält Sass Compiler, Autoprefixer, Stylelint, PurgeCSS, a Bootstrap Ikonen.

Sass

Bootstrap v4 benotzt Node Sass fir eis Sass Quelldateien an CSS Dateien ze kompiléieren (an eisem Bauprozess abegraff). Fir mam selwechten generéierten CSS opzehalen wann Dir Sass mat Ärer eegener Asset Pipeline kompiléiert, musst Dir e Sass Compiler benotzen deen op d'mannst d'Features ënnerstëtzt déi Node Sass mécht. Dëst ass wichteg ze notéieren well ab dem 26. Oktober 2020 LibSass a Packagen drop gebaut ginn - inklusiv Node Sass - ofgeschaaft ginn .

Wann Dir méi nei Sass Features oder Kompatibilitéit mat méi nei CSS Standards erfuerdert, ass Dart Sass elo déi primär Implementatioun vu Sass an ënnerstëtzt eng JavaScript API déi komplett kompatibel ass mat Node Sass (mat e puer Ausnahmen, déi op Dart Sass GitHub Säit opgezielt sinn ).

Mir erhéijen d'Sass Ronn Präzisioun op 6 (par défaut ass et 5 am Node Sass) fir Probleemer mat Browser-Ronn ze vermeiden. Wann Dir Dart Sass benotzt, wäert dat net eppes sinn wat Dir musst upassen, well dee Compiler eng Ronn Präzisioun vun 10 benotzt an aus Effizienzgrënn net erlaabt datt se ugepasst ginn.

Autoprefixer

Bootstrap benotzt Autoprefixer (abegraff an eisem Build-Prozess) fir automatesch Verkeefer Präfixe fir e puer CSS-Eegeschafte bei der Bauzäit ze addéieren. Dat ze maachen spuert eis Zäit a Code andeems mir eis Schlësseldeeler vun eisem CSS eng eenzeg Kéier schreiwen, wärend de Besoin fir Verkeefermixins eliminéiert wéi déi am v3 fonnt ginn.

Mir halen d'Lëscht vun de Browser ënnerstëtzt duerch Autoprefixer an enger separater Datei an eisem GitHub Repository. Gesinn .browserslistrc fir Detailer.

Lokal Dokumentatioun

Eis Dokumentatioun lokal ze lafen erfuerdert d'Benotzung vum Hugo, deen iwwer den Hugo-bin npm Package installéiert gëtt. Hugo ass e blazingly schnellen an zimlech erweiterbare statesche Site Generator deen eis ubitt: Basis enthält, Markdown-baséiert Dateien, Templates, a méi. Hei ass wéi et unzefänken:

  1. Run duerch den Tooling-Setup hei uewen fir all Ofhängegkeeten ze installéieren.
  2. Aus dem Root /bootstrapVerzeechnes, lafen npm run docs-servean der Kommandozeil.
  3. Open http://localhost:9001/an Ärem Browser, a voilà.

Léiert méi iwwer d'Benotzung vum Hugo andeems Dir seng Dokumentatioun liest .

Troubleshooting

Sollt Dir Problemer mat der Installatioun vun Ofhängegkeeten begéinen, deinstalléiert all fréier Ofhängegkeetsversioune (global a lokal). Dann, widderhuelen npm install.