Buuka ku bigambo ebikulu Buuka ku docs navigation
Check
in English

Bootstrap & Omukutu gwa yintaneeti

Ekitabo ekitongole eky'engeri y'okussaamu n'okugatta CSS ne JavaScript za Bootstrap mu pulojekiti yo ng'okozesa Webpack.

Ku muko guno
Oyagala okubuuka okutuuka ku nkomerero? Wano wefunire source code ne demo ekola ku guide eno okuva mu twbs/examples repository . Osobola n'okuggulawo ekyokulabirako mu StackBlitz okulongoosa obutereevu.

Okutandika

Tuzimba pulojekiti ya Webpack ne Bootstrap okuva ku ntandikwa, kale waliwo ebyetaagisa n’emitendera egy’omu maaso nga tetunnatandika ddala. Ekitabo kino kyetaaga okuba ne Node.js etekeddwako n’okumanyiira okutonotono ku terminal.

  1. Tonda ekitabo kya pulojekiti era oteekewo npm. Tujja kukola my-projectfolder era tutandike npm -yn'ensonga okwewala okutubuuza ebibuuzo byonna ebikwatagana.

    mkdir my-project && cd my-project
npm init -y

  2. Teeka mu nkola Webpack. Ekiddako twetaaga okuteeka Webpack development dependencies zaffe: webpackku core ya Webpack, webpack-clitusobole okuddukanya ebiragiro bya Webpack okuva ku terminal, era webpack-dev-serverbwetutyo tusobole okuddukanya local development server. Tukozesa --save-devokulaga nti ebisinziirwako bino bya kukozesa nkulaakulana yokka so si bya kukola.

    npm i --save-dev webpack webpack-cli webpack-dev-server

  3. Teeka mu nkola ya Bootstrap. Kati tusobola okuteeka Bootstrap. Tujja kuteeka ne Popper okuva dropdowns zaffe, popovers, ne tooltips bwe zisinziira ku yo ku positioning yaabwe. Bw’oba ​​toteekateeka kukozesa bitundu ebyo, osobola okulekayo Popper wano.

    npm i --save bootstrap @popperjs/core

  4. Teeka ebisinziirwako ebirala. Ng’oggyeeko Webpack ne Bootstrap, twetaaga ebirala ebitonotono ebisinziirako okuyingiza obulungi n’okugatta CSS ne JS za Bootstrap ne Webpack. Mu bino mulimu Sass, ebitikka ebimu, ne Autoprefixer.

    npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader

Kati nga bwetulina dependencies zonna ezeetaagisa eziteekeddwawo, tusobola okutandika okukola nga tukola fayiro za pulojekiti n’okuyingiza Bootstrap.

Ensengeka ya pulojekiti

Twakola dda my-projectfolda ne tutandika npm. Kati tujja kukola srcne distfolders zaffe ne okuzingulula ensengeka ya pulojekiti. Dduka bino wammanga okuva mu my-project, oba tonda mu ngalo ekitabo n'ensengeka ya fayiro eragiddwa wansi.

mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js

Bw’omala, pulojekiti yo enzijuvu erina okufaanana bweti:

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

Mu kiseera kino, buli kimu kiri mu kifo ekituufu, naye Webpack tegenda kukola kubanga tetunnajjuza yaffe webpack.config.jsn'okutuusa kati.

Tegeka Webpack

Nga dependencies ziteekeddwawo era nga project folder yaffe yeetegefu okutandika okukola coding, kati tusobola okutegeka Webpack ne tuddukanya project yaffe mu kitundu.

  1. Ggulawo webpack.config.jsmu editor yo. Okuva bwe kiri nti blank, tujja kwetaaga okugigattako boilerplate config tusobole okutandika server yaffe. Ekitundu kino ekya config kigamba Webpack nti baali banoonya JavaScript ya pulojekiti yaffe, wa we balina okufulumya code ekung’aanyiziddwa ku ( dist), n’engeri seva y’enkulaakulana gy’erina okweyisaamu (okusika okuva mu distfolda n’okuddamu okutikka okw’ebbugumu).

    const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  }
}

  2. Ekiddako tujjuzaamu dist/index.html. Guno gwe muko gwa HTML Webpack gw’egenda okutikka mu browser okukozesa CSS ne JS ezikuŋŋaanyiziddwa ze tujja okugyongerako mu mitendera egy’oluvannyuma. Nga tetunnakola ekyo, tulina okugiwa ekintu eky’okulaga n’okussaamu outputJS okuva mu mutendera oguwedde.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Webpack</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Webpack!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script src="./main.js"></script>
  </body>
</html>

    Tussaamu akatono ku Bootstrap styling wano ne the div class="container"ne <button>tulabe nga Bootstrap's CSS etikkibwa Webpack.

  3. Kati twetaaga script ya npm okuddukanya Webpack. Ggulawo package.jsonera osseeko startscript eragiddwa wansi (olina okuba nga olina dda script y'okugezesa). Tujja kukozesa script eno okutandika Webpack dev server yaffe eya wano.

    {
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}

  4. Era ekisembayo, tusobola okutandika Webpack. Okuva mu my-projectfolda mu terminal yo, dduka script eyo eya npm eyaakayongerwako:

    npm start
    Webpack dev seva ekola

Mu kitundu ekiddako era ekisembayo mu kitabo kino, tujja kuteekawo ebitikka Webpack era tuyingize CSS ne JavaScript zonna eza Bootstrap.

Okuyingiza Bootstrap

Okuyingiza Bootstrap mu Webpack kyetaagisa loaders ze twateeka mu kitundu ekisooka. Tuziteeka ne npm, naye kati Webpack yeetaaga okuteekebwateekebwa okusobola okuzikozesa.

  1. Teekawo ebitikka mu webpack.config.js. Fayiro yo ey'okusengeka kati ewedde era erina okukwatagana n'ekitundu wansi. Ekitundu ekipya kyokka wano kye modulekitundu.

    const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

    Laba wano recap lwaki twetaaga loaders zino zonna. style-loadereyingiza CSS mu <style>element mu <head>ya ya HTML page, css-loadereyamba mu kukozesa @importne url(), postcss-loaderkyetaagisa ku Autoprefixer, era sass-loaderetusobozesa okukozesa Sass.

  2. Kati, ka tuyingize CSS ya Bootstrap. Okwongerako bino wammanga ku src/scss/styles.scssokuyingiza byonna ebya Bootstrap's source Sass.

    // Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

    Osobola n’okuyingiza sitayiro zaffe kinnoomu bw’oba ​​oyagala. Soma Sass import docs zaffe okumanya ebisingawo.

  3. Ekiddako tutikka CSS ne tuyingiza JavaScript ya Bootstrap. Okwongerako bino wammanga ku src/js/main.jsokutikka CSS n'okuyingiza JS zonna eza Bootstrap. Popper ejja kuyingizibwa mu ngeri ey’otoma ng’eyita mu Bootstrap.

    // Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

    Osobola n'okuyingiza JavaScript plugins kinnoomu nga bwe kyetaagisa okukuuma obunene bwa bundle wansi:

    import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'

    Soma ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo ku ngeri y'okukozesaamu plugins za Bootstrap.

  4. Era omaze! 🎉 Nga ensibuko ya Bootstrap Sass ne JS zitikkiddwa mu bujjuvu, seva yo ey'enkulaakulana ey'omu kitundu kati erina okufaanana bweti.

    Webpack dev server ekola ne Bootstrap

    Kati osobola okutandika okwongerako ebitundu bya Bootstrap byonna by’oyagala okukozesa. Kakasa nti okebera pulojekiti y'ekyokulabirako ya Webpack enzijuvu engeri y'okussaamu Sass ey'enjawulo ey'enjawulo n'okulongoosa okuzimba kwo ng'oyingiza ebitundu byokka ebya Bootstrap's CSS ne JS by'olina.

Okulongoosa okufulumya ebintu

Okusinziira ku nteekateeka yo, oyinza okwagala okussa mu nkola ebimu ku by’okwerinda ebirala n’okulongoosa sipiidi eby’omugaso mu kuddukanya pulojekiti mu kukola. Weetegereze nti okulongoosa kuno tekukozesebwa ku pulojekiti y'ekyokulabirako ya Webpack era biri gy'oli okussa mu nkola.

Okuggyamu CSS

The style-loadertwategeka waggulu conveniently efulumya CSS mu bundle olwo okutikka fayiro ya CSS mu ngalo mu dist/index.htmltekikyetaagisa. Enkola eno eyinza obutakola n'Enkola enkakali ey'Obukuumi bw'Ebirimu, naye, era eyinza okufuuka ekizibu mu nkola yo olw'obunene bw'ekibinja ekinene.

Okwawula CSS tusobole okugitikka butereevu okuva ku dist/index.html, kozesa mini-css-extract-loaderWebpack plugin.

Okusooka, ssaako plugin eno:

npm install --save-dev mini-css-extract-plugin

Oluvannyuma kola instantiate era okozese plugin mu nsengeka ya Webpack:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 
 module.exports = {
   mode: 'development',
   entry: './src/js/main.js',
+  plugins: [new miniCssExtractPlugin()],
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
         test: /\.(scss)$/,
         use: [
           {
-            // Adds CSS to the DOM by injecting a `<style>` tag
-            loader: 'style-loader'
+            // Extracts CSS for each JS file that includes CSS
+            loader: miniCssExtractPlugin.loader
           },
           {

Oluvannyuma lw'okuddamu okudduka npm run build, wajja kubaawo fayiro empya dist/main.css, ejja okubeeramu CSS zonna eziyingiziddwa src/js/main.js. Bw’olaba dist/index.htmlmu browser yo kati, sitayiro ejja kuba ebula, nga bwe kiri kati mu dist/main.css. Osobola okussaamu CSS ekoleddwa mu dist/index.htmlnga eno:

--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./main.css">
     <title>Bootstrap w/ Webpack</title>
   </head>
   <body>

Okuggya fayiro za SVG

CSS ya Bootstrap erimu ebijuliziddwa ebingi ku fayiro za SVG nga ziyita mu data:URI eziri mu layini. Singa otegeeza Enkola y'Obukuumi bw'Ebirimu ku pulojekiti yo eziyiza data:URIs z'ebifaananyi, olwo fayiro zino eza SVG tezijja kutikka. Osobola okwewala ekizibu kino ng'oggyamu fayiro za SVG eziri mu layini ng'okozesa ekintu kya Webpack eky'eby'obugagga modules.

Tegeka Webpack okuggya fayiro za SVG eziri mu layini nga zino:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        mimetype: 'image/svg+xml',
+        scheme: 'data',
+        type: 'asset/resource',
+        generator: {
+          filename: 'icons/[hash].svg'
+        }
+      },
       {
         test: /\.(scss)$/,
         use: [

Oluvannyuma lw'okuddamu okudduka npm run build, ojja kusanga fayiro za SVG nga ziggiddwamu dist/iconsera nga zijuliziddwa bulungi okuva mu CSS.

Olaba ekintu ekikyamu oba ekivudde ku mulembe wano? Nsaba oggulewo ensonga ku GitHub . Oyagala buyambi okugonjoola ebizibu? Noonya oba tandika okukubaganya ebirowoozo ku GitHub.