Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
Check
in English

Bootstrap & Tukutuku

Ko te aratohu whai mana mo te whakauru me te paihere i te CSS me te JavaScript a Bootstrap ki to kaupapa ma te whakamahi i te Paetukutuku.

I tenei wharangi
Kei te pirangi koe ki te peke ki te mutunga? Tikiake i te waehere puna me te demo mahi mo tenei aratohu mai i te rehitatanga twbs/tauira . Ka taea hoki e koe te whakatuwhera i te tauira i StackBlitz mo te whakatika ora.

Tatūnga

Kei te hangahia e matou he kaupapa Webpack me Bootstrap mai i te timatanga, no reira kei reira etahi tikanga me nga kaupae o mua i mua i te tiimata. Ko tenei aratohu me whakauru koe i a Node.js me te mohio ki te tauranga.

  1. Waihangahia he kōpaki kaupapa me te tatūnga npm. Ka hangahia e matou te my-projectkōpaki ka arawhiti i te npm me te -ytohenga kia kore ai e patai mai ki a matou nga patai tauwhitiwhiti katoa.

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

  2. Tāutahia te Paetukutuku. I muri mai me whakauru e matou o matou whakawhirinakitanga whanaketanga Webpack: webpackmo te matua o Webpack, webpack-clikia taea ai e matou te whakahaere i nga tono Webpack mai i te tauranga, webpack-dev-serverkia taea ai e matou te whakahaere i tetahi tūmau whanaketanga rohe. Ka whakamahia e matou --save-devki te tohu ko enei whakawhirinaki mo te whakamahi whanaketanga anake, ehara mo te hanga.

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

  3. Tāutahia te Bootstrap. Inaianei ka taea e taatau te whakauru Bootstrap. Ka whakauruhia ano e matou a Popper na te mea ka whakawhirinaki a maatau whakahekenga, pouvers, me nga aki taputapu mo o raatau tuunga. Mena kaore koe e whakaaro ki te whakamahi i aua waahanga, ka taea e koe te waiho Popper konei.

    npm i --save bootstrap @popperjs/core

  4. Tāutahia ētahi atu whakawhirinakitanga. I tua atu i te Webpack me te Bootstrap, ka hiahia matou ki etahi atu whakawhirinakitanga ki te kawe tika me te paihere i te CSS me te JS a Bootstrap me te Webpack. Kei roto i enei ko Sass, etahi kaitautai, me te Autoprefixer.

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

Inaianei kua whakauruhia e matou nga whakawhirinakitanga e tika ana, ka taea e matou te mahi ki te hanga i nga konae kaupapa me te kawemai i a Bootstrap.

Te hanganga kaupapa

Kua oti i a maatau te hanga i te my-projectkōpaki me te tiimata i te npm. Inaianei ka hanga ano i a maatau srcme nga distkōpaki hei whakaawhiwhi i te hanganga kaupapa. Whakahaerehia nga mea e whai ake nei mai i te my-project, te hanga a ringa ranei i te kōpaki me te hanganga konae kei raro nei.

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

Ina oti koe, me penei te ahua o to kaupapa:

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

I tenei wa, kei te waahi tika nga mea katoa, engari kaore a Webpack e mahi na te mea kaore ano kia whakakiia a maatau webpack.config.js.

Whirihorahia te Paetukutuku

I te mea kua whakauruhia nga whakawhirinakitanga me ta maatau kōpaki kaupapa kua reri mo tatou ki te timata ki te whakawaehere, ka taea e tatou te whirihora i te Webpack me te whakahaere i ta tatou kaupapa i te rohe.

  1. Tuwhera webpack.config.jsi roto i to ētita. I te mea kei te waatea, me taapiri atu he whirihoranga boilerplate ki reira kia taea ai e tatou te timata i ta tatou tūmau. Ko tenei waahanga o te whirihora e kii ana ki a Webpack me rapu i te JavaScript a taatau kaupapa, kei hea te whakaputa i te waehere kua whakahiato ki te ( dist), me pehea te whanonga o te tūmau whanaketanga (te kumea mai i te distkōpaki me te uta wera).

    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. Whai muri ka whakakiia to maatau dist/index.html. Koinei te wharangi HTML ka utaina e te Paetukutuku i roto i te tirotiro hei whakamahi i te CSS me te JS kua whakauruhia ka taapirihia e matou i nga waahanga o muri. I mua i ta maatau mahi, me hoatu e matou he mea hei tuku me te whakauru i te outputJS mai i te taahiraa o mua.

    <!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>

    Kei te whakaurua e matou he iti mo te ahua o Bootstrap ki konei me te div class="container"a <button>kia kite tatou i te wa e utaina ana a Bootstrap CSS e Webpack.

  3. Inaianei kei te hiahia matou he tuhinga npm hei whakahaere i te Webpack. Whakatuwherahia package.jsonka taapirihia te starttuhinga e whakaatuhia ana i raro nei (me whai koe i te tuhinga whakamatautau). Ka whakamahia e matou tenei tuhinga hei tiimata i to maatau paetukutuku Webpack dev server.

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

  4. Ka mutu, ka taea e tatou te tiimata i te Tukutuku. Mai i te my-projectkōpaki i roto i to tauranga, whakahaere i te tuhinga npm hou kua taapirihia:

    npm start
    Kei te rere te tūmau dev Webpack

I te waahanga e whai ake nei me te waahanga whakamutunga ki tenei aratohu, ka whakatuuhia e matou nga kaieke Tukutuku me te kawemai i nga CSS me JavaScript katoa a Bootstrap.

Kawemai Bootstrap

Ko te kawemai i a Bootstrap ki roto i te Peeke Tukutuku e hiahia ana nga kaitautai i whakauruhia e matou ki te waahanga tuatahi. Kua whakauruhia e matou ki te npm, engari inaianei me whirihora a Webpack hei whakamahi.

  1. Whakaturia nga kaieke ki roto webpack.config.js. Kua oti to konae whirihoranga, me taurite ki te wahanga o raro. Ko te waahanga hou anake i konei ko te modulewaahanga.

    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'
          }
        ]
      }
    ]
  }
}

    Anei he korero mo te take e hiahia ana matou ki enei kaiuta katoa. style-loaderka werohia te CSS ki tetahi <style>huānga <head>o te wharangi HTML, css-loaderka awhina i te whakamahi @importme te url(), postcss-loadere hiahiatia ana mo te Autoprefixer, ka sass-loadertaea te whakamahi i a Sass.

  2. Inaianei, me kawemai a Bootstrap's CSS. Taapirihia nga mea e whai ake nei ki src/scss/styles.scsste kawemai i te puna katoa o Bootstrap Sass.

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

    Ka taea hoki e koe te kawemai i a maatau pepa ahua takitahi ki te hiahia koe. Panuihia a maatau tuhinga kawemai a Sass mo nga taipitopito.

  3. I muri mai ka utaina e matou te CSS me te kawemai i te JavaScript a Bootstrap. Tāpirihia nga mea e whai ake nei ki src/js/main.jste uta i te CSS me te kawemai i nga JS katoa a Bootstrap. Ka kawemai aunoa a Popper ma Bootstrap.

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

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

    Ka taea hoki e koe te kawemai i nga monomai JavaScript takitahi ina hiahiatia kia heke iho te rahi o te paihere:

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

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

    Panuihia a maatau tuhinga JavaScript mo etahi atu korero mo te whakamahi i nga taputapu a Bootstrap.

  4. A kua oti koe! 🎉 Na te puna a Bootstrap a Sass me JS kua utaina katoa, me penei te ahua o to tuumau whanaketanga o to rohe.

    Kei te whakahaere te tūmau dev Webpack me Bootstrap

    Ka taea e koe te tiimata ki te taapiri i nga waahanga Bootstrap e hiahia ana koe ki te whakamahi. Kia mahara ki te tirotiro i te kaupapa tauira Webpack katoa mo te whakauru i etahi atu ritenga Sass me te arotau i to hanga ma te kawemai i nga waahanga o Bootstrap's CSS me JS e hiahia ana koe.

Nga arotautanga whakaputa

I runga i to tatūnga, ka hiahia pea koe ki te whakatinana i etahi atu haumarutanga me nga arotautanga tere e whai hua ana mo te whakahaere i te kaupapa ki te whakaputa. Kia mahara kaore enei arotautanga i te tono ki te kaupapa tauira Webpack , kei a koe ano te whakatinana.

Te tango CSS

Ko style-loaderta matou i whirihora i runga ake nei ka tukuna he CSS ki roto i te paihere kia kore ai e tika te uta i te konae CSS ki roto dist/index.html. Kare pea tenei huarahi e mahi me tetahi Kaupapa Here Haumarutanga Ihirangi, heoi, ka waiho pea hei kohungahunga i to tono na te nui o te paihere.

Hei wehe i te CSS kia taea ai te uta tika mai i dist/index.htmlte , whakamahia te mini-css-extract-loadermono Webpack.

Tuatahi, tāuta te mono:

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

Na ka totika me te whakamahi i te mono i roto i te whirihoranga 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
           },
           {

Whai muri i te whakahaere npm run buildano, ka puta he konae hou dist/main.css, kei roto katoa nga CSS i kawemai e src/js/main.js. Ki te tiro koe dist/index.htmli roto i to kaitirotiro inaianei, ka ngaro te ahua, kei roto inaianei dist/main.css. Ka taea e koe te whakauru i te CSS i hangaia dist/index.htmlpenei:

--- 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>

Te tango i nga konae SVG

Kei roto i te CSS Bootstrap nga tohutoro maha ki nga konae SVG ma nga data:URI raina. Mena ka tautuhia e koe he Kaupapahere Haumarutanga Ihirangi mo to kaupapa e aukati ana i data:nga URI mo nga whakaahua, ka kore enei konae SVG e utaina. Ka taea e koe te whakatika i tenei raru ma te tango i nga konae SVG raarangi ma te whakamahi i nga waahanga waahanga rawa a Webpack.

Whirihorahia te Paetukutuku ki te tango i nga konae SVG-roto penei:

--- 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: [

I muri i te rere npm run buildano, ka kitea e koe nga konae SVG kua tangohia ki roto dist/iconska tika te tohutoro mai i te CSS.

Ka kite i tetahi mea he, kua tawhito ranei i konei? Whakatuwheratia he take ki GitHub . Me awhina ki te rapu raruraru? Rapua, timata ranei he korerorero mo GitHub.