in English

Manamboara fitaovana

Ianaro ny fomba fampiasana ny script npm tafiditra ao amin'ny Bootstrap hanamboarana ny antontan-taratasintsika, hanangonana kaody loharano, hanaovana fitsapana, sy ny maro hafa.

Fanamboarana fitaovana

Bootstrap dia mampiasa script npm ho an'ny rafitra fananganana azy. Ny package.json dia ahitana fomba mety amin'ny fiasana amin'ny rafitra, ao anatin'izany ny fanangonana kaody, ny fanaovana fitiliana, sy ny maro hafa.

Raha hampiasa ny rafitra fananganana sy hampandehanana ny antontan-taratasintsika eo an-toerana ianao dia mila dika mitovy amin'ny rakitra loharanon'i Bootstrap sy ny Node. Araho ireto dingana ireto ary tokony ho vonona amin'ny rock ianao:

  1. Ampidino ary apetraho ny Node.js , izay ampiasainay hitantana ny fiankinanay.
  2. Na alao ny loharanon'i Bootstrap na ny fitehirizan'i Bootstrap .
  3. Mankanesa any amin'ny /bootstraplahatahiry fototra ary mihazakazaka npm installhametraka ny fiankinana eo an-toerana voatanisa ao amin'ny package.json .

Rehefa vita ianao dia afaka manatanteraka ireo baiko isan-karazany omena avy amin'ny andalana baiko.

Mampiasa script npm

Ny package.json dia ahitana ireto baiko sy asa manaraka ireto:

ASA Description
npm run dist npm run distmamorona ny /dist/lahatahiry misy rakitra natambatra. Mampiasa Sass , Autoprefixer , ary terser .
npm test Manatanteraka fitsapana eo an-toerana aorian'ny fandehanananpm run dist
npm run docs-serve Manorina sy mitantana ny antontan-taratasy eo an-toerana.

Mihazakazaha npm runhijery ny script npm rehetra.

Manomboha amin'ny Bootstrap amin'ny alàlan'ny npm miaraka amin'ny tetikasa fanombohana! Mankanesa any amin'ny tranokala môdely twbs/bootstrap-npm-starter mba hahitana ny fomba fananganana sy fanamboarana Bootstrap amin'ny tetikasa npm anao manokana. Ahitana Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ary kisary Bootstrap.

Sass

Bootstrap v4 dia mampiasa Node Sass amin'ny fanangonana ny rakitra loharano Sass ho rakitra CSS (tafiditra ao anatin'ny dingana fananganana). Mba hiafara amin'ny CSS novokarina mitovy amin'ny fanangonana Sass amin'ny alàlan'ny fantsom-panananao manokana dia mila mampiasa compiler Sass ianao izay manohana farafaharatsiny ny endri-javatra izay ataon'i Node Sass. Zava-dehibe ny manamarika izany satria hatramin'ny 26 Oktobra 2020, LibSass sy ny fonosana naorina teo amboniny — anisan'izany ny Node Sass — dia tsy ampiasaina intsony .

Raha mila endri-javatra Sass vaovao kokoa ianao na mifanaraka amin'ny fenitra CSS vaovao, Dart Sass izao no fampiharana voalohany an'ny Sass ary manohana JavaScript API izay mifanaraka tanteraka amin'ny Node Sass (miaraka amin'ny maningana vitsivitsy voatanisa ao amin'ny pejin'ny GitHub an'i Dart Sass ).

Ampitomboinay ho 6 ny mari-pandrefesana Sass (amin'ny alàlan'ny default, 5 ao amin'ny Node Sass) mba hisorohana ny olana amin'ny fihodinan'ny navigateur. Raha mampiasa Dart Sass ianao dia tsy ho zavatra ilainao amboarina izany, satria io compiler io dia mampiasa tsipika boribory 10 ary noho ny antony mahomby dia tsy mamela azy hanitsy.

Autoprefixer

Bootstrap dia mampiasa Autoprefixer (tafiditra ao anatin'ny dingan'ny fananganana) mba hampidirana ho azy ireo tovan'ny mpivarotra amin'ny fananana CSS sasany amin'ny fotoana fananganana. Ny fanaovana izany dia mitsitsy fotoana sy kaody amin'ny alàlan'ny famelana antsika hanoratra ampahany manan-danja amin'ny CSS-tsika indray mandeha ary manafoana ny filàna mixins mpivarotra toa an'ireo hita ao amin'ny v3.

Izahay dia mitazona ny lisitry ny navigateur tohanana amin'ny alàlan'ny Autoprefixer ao anaty rakitra misaraka ao anatin'ny tahiry GitHub. Jereo ny .browserslistrc raha mila fanazavana fanampiny.

Taratasy eo an-toerana

Ny fampandehanana ny antontan-taratasintsika eo an-toerana dia mitaky ny fampiasana Hugo, izay apetraka amin'ny alàlan'ny fonosana hugo-bin npm. Hugo dia mpanamboatra tranokala static haingana sy azo esorina izay manome antsika: fototra ahitana, rakitra miorina amin'ny Markdown, môdely ary maro hafa. Toy izao ny fomba hanombohana azy:

  1. Mihazakazaka amin'ny fametrahana fitaovana etsy ambony mba hametrahana ny fiankinan-doha rehetra.
  2. Avy amin'ny /bootstraplahatahiry fototra, mandehana npm run docs-serveao amin'ny baiko baiko.
  3. Sokafy http://localhost:9001/amin'ny navigateur, ary voilà.

Mianara bebe kokoa momba ny fampiasana an'i Hugo amin'ny famakiana ny antontan -taratasiny .

Fanamboarana

Raha sendra olana amin'ny fametrahana ny fiankinan-doha ianao dia esory ny dikan-teny miankina rehetra teo aloha (manerantany sy eo an-toerana). Avy eo, avereno indray npm install.