Вэб багц

Webpack ашиглан Bootstrap-ийг төсөлдөө хэрхэн оруулах талаар суралц.

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

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

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

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

import 'bootstrap';

Эсвэл шаардлагатай бол нэмэлт өргөтгөлүүдийг тус тусад нь оруулж болно :

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap нь шинж чанарт заасан jQuery болон Popper -ээс хамаардаг peerDependencies; Энэ нь та аль алиныг нь package.jsonашиглахдаа нэмэх хэрэгтэй болно гэсэн үг юм npm install --save jquery popper.js.

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

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

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

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

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

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

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

Эмхэтгэсэн 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']
    }
  ]
}
...