in English

Costruisci strumenti

Scopri come utilizzare gli script npm inclusi in Bootstrap per creare la nostra documentazione, compilare il codice sorgente, eseguire test e altro ancora.

Configurazione degli utensili

Bootstrap utilizza gli script npm per il suo sistema di compilazione. Il nostro package.json include metodi convenienti per lavorare con il framework, inclusa la compilazione del codice, l'esecuzione di test e altro ancora.

Per utilizzare il nostro sistema di compilazione ed eseguire la nostra documentazione in locale, avrai bisogno di una copia dei file sorgente e di Node di Bootstrap. Segui questi passaggi e dovresti essere pronto per il rock:

  1. Scarica e installa Node.js , che utilizziamo per gestire le nostre dipendenze.
  2. Scarica i sorgenti di Bootstrap o esegui il fork del repository di Bootstrap .
  3. Passa alla /bootstrapdirectory principale ed esegui npm installper installare le nostre dipendenze locali elencate in package.json .

Al termine, sarai in grado di eseguire i vari comandi forniti dalla riga di comando.

Utilizzo di script npm

Il nostro package.json include i seguenti comandi e attività:

Compito Descrizione
npm run dist npm run distcrea la /dist/directory con i file compilati. Utilizza Sass , Autoprefixer e terser .
npm test Esegue i test in locale dopo l'esecuzionenpm run dist
npm run docs-serve Crea ed esegue la documentazione in locale.

Esegui npm runper vedere tutti gli script npm.

Inizia con Bootstrap tramite npm con il nostro progetto iniziale! Vai al repository di modelli twbs /bootstrap-npm-starter per vedere come creare e personalizzare Bootstrap nel tuo progetto npm. Include le icone del compilatore Sass, Autoprefixer, Stylelint, PurgeCSS e Bootstrap.

Sass

Bootstrap v4 utilizza Node Sass per compilare i nostri file sorgente Sass in file CSS (inclusi nel nostro processo di compilazione). Per ottenere lo stesso CSS generato durante la compilazione di Sass utilizzando la propria pipeline di risorse, è necessario utilizzare un compilatore Sass che supporti almeno le funzionalità di Node Sass. Questo è importante da notare perché a partire dal 26 ottobre 2020, LibSass e i pacchetti basati su di esso, incluso Node Sass, sono obsoleti .

Se hai bisogno di funzionalità Sass più recenti o compatibilità con gli standard CSS più recenti, Dart Sass è ora l'implementazione principale di Sass e supporta un'API JavaScript completamente compatibile con Node Sass (con alcune eccezioni elencate nella pagina GitHub di Dart Sass ).

Aumentiamo la precisione di arrotondamento di Sass a 6 (per impostazione predefinita, è 5 in Node Sass) per evitare problemi con l'arrotondamento del browser. Se usi Dart Sass, questo non sarà qualcosa che devi regolare, poiché quel compilatore utilizza una precisione di arrotondamento di 10 e per motivi di efficienza non ne consente la regolazione.

Prefisso automatico

Bootstrap utilizza Autoprefixer (incluso nel nostro processo di compilazione) per aggiungere automaticamente i prefissi dei fornitori ad alcune proprietà CSS in fase di compilazione. Ciò ci consente di risparmiare tempo e codice consentendoci di scrivere parti chiave del nostro CSS una sola volta eliminando la necessità di mixin dei fornitori come quelli che si trovano nella v3.

Manteniamo l'elenco dei browser supportati tramite Autoprefixer in un file separato all'interno del nostro repository GitHub. Vedere .browserslistrc per i dettagli.

Documentazione locale

L'esecuzione della nostra documentazione in locale richiede l'uso di Hugo, che viene installato tramite il pacchetto hugo-bin npm. Hugo è un generatore di siti statici incredibilmente veloce e abbastanza estensibile che ci fornisce: include di base, file basati su Markdown, modelli e altro ancora. Ecco come iniziare:

  1. Esegui la configurazione degli strumenti sopra per installare tutte le dipendenze.
  2. Dalla /bootstrapdirectory principale, esegui npm run docs-servenella riga di comando.
  3. Apri http://localhost:9001/nel tuo browser e voilà.

Scopri di più sull'utilizzo di Hugo leggendo la sua documentazione .

Risoluzione dei problemi

In caso di problemi con l'installazione delle dipendenze, disinstallare tutte le versioni precedenti delle dipendenze (globale e locale). Quindi, riesegui npm install.