Вэб багц

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

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

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

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

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

import 'bootstrap';

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

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

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 post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            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']
      }
    ]
  }
  ...