in English

Bygg verktyg

Lär dig hur du använder Bootstraps medföljande npm-skript för att bygga vår dokumentation, kompilera källkod, köra tester och mer.

Verktygsinställning

Bootstrap använder npm-skript för sitt byggsystem. Vår package.json innehåller praktiska metoder för att arbeta med ramverket, inklusive kompilering av kod, körning av tester och mer.

För att använda vårt byggsystem och köra vår dokumentation lokalt behöver du en kopia av Bootstraps källfiler och Node. Följ dessa steg och du bör vara redo att rocka:

  1. Ladda ner och installera Node.js , som vi använder för att hantera våra beroenden.
  2. Hämta antingen Bootstraps källor eller dela Bootstraps arkiv .
  3. Navigera till rotkatalogen /bootstrapoch kör npm installför att installera våra lokala beroenden som anges i package.json .

När du är klar kommer du att kunna köra de olika kommandona från kommandoraden.

Använder npm-skript

Vår package.json innehåller följande kommandon och uppgifter:

Uppgift Beskrivning
npm run dist npm run distskapar /dist/katalogen med kompilerade filer. Använder Sass , Autoprefixer och terser .
npm test Kör tester lokalt efter körningnpm run dist
npm run docs-serve Bygger och kör dokumentationen lokalt.

Kör npm runför att se alla npm-skript.

Kom igång med Bootstrap via npm med vårt startprojekt! Gå till mallförrådet twbs/bootstrap-npm-starter för att se hur du bygger och anpassar Bootstrap i ditt eget npm-projekt. Inkluderar Sass-kompilator, Autoprefixer, Stylelint, PurgeCSS och Bootstrap-ikoner.

Sass

Bootstrap v4 använder Node Sass för att kompilera våra Sass-källfiler till CSS-filer (ingår i vår byggprocess). För att sluta med samma genererade CSS när du kompilerar Sass med din egen tillgångspipeline, måste du använda en Sass-kompilator som stöder åtminstone de funktioner som Node Sass gör. Detta är viktigt att notera eftersom från och med den 26 oktober 2020 är LibSass och paket som byggts ovanpå det – inklusive Node Sass – utfasade .

Om du behöver nyare Sass-funktioner eller kompatibilitet med nyare CSS-standarder är Dart Sass nu den primära implementeringen av Sass och stöder ett JavaScript-API som är fullt kompatibelt med Node Sass (med några få undantag listade på Dart Sass GitHub-sida ).

Vi ökar Sass-avrundningsprecisionen till 6 (som standard är den 5 i Node Sass) för att förhindra problem med webbläsaravrundning. Om du använder Dart Sass kommer detta inte att vara något du behöver justera, eftersom den kompilatorn använder en avrundningsprecision på 10 och av effektivitetsskäl inte tillåter att den justeras.

Autoprefixer

Bootstrap använder Autoprefixer (ingår i vår byggprocess) för att automatiskt lägga till leverantörsprefix till vissa CSS-egenskaper vid byggtiden. Genom att göra det sparar vi tid och kod genom att tillåta oss att skriva viktiga delar av vår CSS en gång samtidigt som vi eliminerar behovet av leverantörsmixins som de som finns i v3.

Vi upprätthåller listan över webbläsare som stöds av Autoprefixer i en separat fil i vårt GitHub-förråd. Se .browserslistrc för detaljer.

Lokal dokumentation

Att köra vår dokumentation lokalt kräver användning av Hugo, som installeras via hugo-bin npm-paketet. Hugo är en blixtsnabb och ganska utbyggbar statisk webbplatsgenerator som ger oss: grundläggande inkluderar, Markdown-baserade filer, mallar och mer. Så här kommer du igång:

  1. Kör igenom verktygsinställningarna ovan för att installera alla beroenden.
  2. Kör på kommandoraden från /bootstraprotkatalogen .npm run docs-serve
  3. Öppna http://localhost:9001/i din webbläsare och voilà.

Lär dig mer om hur du använder Hugo genom att läsa dess dokumentation .

Felsökning

Om du skulle stöta på problem med att installera beroenden, avinstallera alla tidigare beroendeversioner (globala och lokala). Kör sedan igen npm install.