Hoppa till huvudinnehållet Hoppa till dokumentnavigering
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.

På den här sidan

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 många uppgifter för att utveckla projektet. Kör npm runför att se alla npm-skript i din terminal. Primära arbetsuppgifter inkluderar:

Uppgift Beskrivning
npm start Kompilerar CSS och JavaScript, bygger dokumentationen och startar en lokal server.
npm run dist Skapar dist/katalogen med kompilerade filer. Kräver 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.
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 använder Dart Sass för att kompilera våra Sass-källfiler till CSS-filer (ingår i vår byggprocess), och vi rekommenderar att du gör detsamma om du kompilerar Sass med din egen tillgångspipeline. Vi använde tidigare Node Sass för Bootstrap v4, men LibSass och paket som byggts ovanpå det, inklusive Node Sass, är nu utfasade .

Dart Sass använder en avrundningsprecision på 10 och tillåter av effektivitetsskäl inte justering av detta värde. Vi sänker inte denna precision under vidare bearbetning av vår genererade CSS, till exempel under minifiering, men om du väljer att göra det rekommenderar vi att du bibehåller en precision på minst 6 för att förhindra problem med webbläsaravrundning.

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.

RTLCSS

Bootstrap använder RTLCSS för att bearbeta kompilerad CSS och konvertera dem till RTL – i princip ersätter horisontella riktningsmedvetna egenskaper (t.ex. padding-left) med deras motsats. Det låter oss bara skriva vår CSS en enda gång och göra mindre justeringar med hjälp av RTLCSS -kontroll- och värdedirektiv .

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.