Webpack болон багцлагч

Bootstrap суулгаж байна

Bootstrap -г npm ашиглан Node.js модуль болгон суулгаарай.

JavaScript импортлож байна

Энэ мөрийг өөрийн програмын нэвтрэх цэг дээр нэмж Bootstrap-ийн JavaScript-г импортлох (ихэвчлэн index.jsэсвэл app.js):

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

Мөн хэрэв танд манай хэдэн залгаас хэрэгтэй бол шаардлагатай бол залгаасуудыг тус тусад нь оруулж болно :

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

Bootstrap нь шинж чанарт заасан Поппероос хамаардаг peerDependencies. Энэ нь та үүнийг package.jsonашиглахдаа заавал нэмэх хэрэгтэй болно гэсэн үг юм npm install @popperjs/core.

Загвар импортлох

Урьдчилан эмхэтгэсэн Sass импортлох

Bootstrap-ийн бүрэн боломжийг ашиглаж, өөрийн хэрэгцээнд нийцүүлэн тохируулахын тулд эх файлуудыг төслийн багцлах үйл явцын нэг хэсэг болгон ашиглаарай.

Нэгдүгээрт, өөрөө үүсгэж , үүнийг ашиглан суулгасан өөрчлөн хувьсагчдыг_custom.scss дарж бичнэ үү . Дараа нь үндсэн Sass файлаа ашиглан өөрчлөн тохируулсан хувьсагчаа, дараа нь Bootstrap-ийг импортлоорой.

@import "custom";
@import "~bootstrap/scss/bootstrap";

Bootstrap-г хөрвүүлэхийн тулд шаардлагатай дуудагчуудыг суулгаж, ашиглаж байгаа эсэхээ шалгаарай: sass-loader , Autoprefixer бүхий postcss -loader . Хамгийн бага тохиргоотой бол таны вэб багцын тохиргоонд дараах дүрэм эсвэл үүнтэй төстэй байх ёстой:

// ...
{
  test: /\.(scss)$/,
  use: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

Эмхэтгэсэн CSS импортлох

Эсвэл та Bootstrap-ийн ашиглахад бэлэн CSS-ийг төслийнхөө нэвтрэх цэгт энэ мөрийг нэмж ашиглаж болно:

import 'bootstrap/dist/css/bootstrap.min.css';

Энэ тохиолдолд та зөвхөн style-loader болон css-loadercss шаардлагагүйгээс бусад тохиолдолд вэб багцын тохиргоонд ямар нэгэн тусгай өөрчлөлт хийхгүйгээр одоо байгаа дүрмээ ашиглаж болно .sass-loader

// ...
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}
// ...