Webpack

Бифаҳмед, ки чӣ тавр бо истифода аз Webpack 3 Bootstrap-ро ба лоиҳаи худ дохил кунед.

Насб кардани Bootstrap

Бо истифода аз npm bootstrap -ро ҳамчун модули Node.js насб кунед.

Воридоти JavaScript

JavaScript-и Bootstrap-ро тавассути илова кардани ин сатр ба нуқтаи вуруди барномаатон ворид кунед (одатан 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 , postcss-loader бо Autoprefixer . Бо ҳадди ақали танзим, конфигуратсияи веб-бастаи шумо бояд ин қоида ё шабеҳро дар бар гирад:

  ...
  {
    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-и тартибдодашуда

Интихобан, шумо метавонед CSS-и барои истифода омодаи Bootstrap-ро тавассути илова кардани ин сатр ба нуқтаи вуруди лоиҳаи худ истифода баред:

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

Дар ин ҳолат шумо метавонед қоидаи мавҷудаи худро барои cssбе ягон тағйироти махсус дар конфигуратсияи webpack истифода баред, ба истиснои шумо sass-loaderтанҳо style-loader ва css-loader лозим нест.

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