Webpack

Kawm paub yuav ua li cas suav nrog Bootstrap hauv koj qhov project siv Webpack 3.

Txhim kho Bootstrap

Nruab bootstrap raws li Node.js module siv npm.

Importing JavaScript

Ntshuam Bootstrap's JavaScript los ntawm kev ntxiv cov kab no rau koj lub app nkag mus (feem ntau index.jslossis app.js):

import 'bootstrap';

Xwb, koj tuaj yeem import plugins ib tus zuj zus raws li xav tau:

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

Bootstrap yog nyob ntawm jQuery thiab Popper , cov no txhais tau tias peerDependencies, qhov no txhais tau hais tias koj yuav tsum ua kom paub tseeb tias ntxiv ob qho tib si rau koj package.jsonsiv npm install --save jquery popper.js.

Importing Styles

Importing Precompiled Sass

Txhawm rau txaus siab rau tag nrho cov peev txheej ntawm Bootstrap thiab kho nws rau koj cov kev xav tau, siv cov ntaub ntawv los ua ib feem ntawm koj qhov project bundling txheej txheem.

Ua ntej, tsim koj tus kheej _custom.scssthiab siv nws los hla cov kev hloov pauv hauv kev cai . Tom qab ntawd, siv koj cov ntaub ntawv tseem ceeb sass los import koj cov kev cai hloov pauv, ua raws li Bootstrap:

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

Rau Bootstrap los sau ua ke, nco ntsoov tias koj nruab thiab siv cov loaders xav tau: sass-loader , postcss-loader nrog Autoprefixer . Nrog kev teeb tsa tsawg, koj lub webpack config yuav tsum suav nrog txoj cai no lossis zoo sib xws:

  ...
  {
    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
    }]
  },
  ...

Importing Compiled CSS

Xwb, koj tuaj yeem siv Bootstrap's npaj-rau-siv css los ntawm kev ntxiv cov kab no rau koj qhov project nkag nkag:

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

Hauv qhov no koj tuaj yeem siv koj txoj cai uas twb muaj lawm rau cssyam tsis muaj kev hloov kho tshwj xeeb rau webpack config tshwj tsis yog koj tsis xav tau sass-loaderstyle -loader thiab css-loader .

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