Webpack và các gói

Cài đặt Bootstrap

Cài đặt bootstrap dưới dạng mô-đun Node.js bằng npm.

Nhập JavaScript

Nhập JavaScript của Bootstrap bằng cách thêm dòng này vào điểm nhập của ứng dụng của bạn (thường là index.jshoặc app.js):

import 'bootstrap';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

Ngoài ra, nếu bạn chỉ cần một vài plugin của chúng tôi, bạn có thể nhập các plugin riêng lẻ nếu cần:

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

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

Bootstrap phụ thuộc vào Popper , được chỉ định trong thuộc peerDependenciestính. Điều này có nghĩa là bạn sẽ phải đảm bảo thêm nó vào mục đích package.jsonsử dụng của mình npm install @popperjs/core.

Nhập kiểu

Nhập Sass được biên dịch trước

Để tận hưởng toàn bộ tiềm năng của Bootstrap và tùy chỉnh nó theo nhu cầu của bạn, hãy sử dụng các tệp nguồn như một phần của quy trình đóng gói dự án của bạn.

Trước tiên, hãy tạo của riêng bạn _custom.scssvà sử dụng nó để ghi đè các biến tùy chỉnh được tích hợp sẵn . Sau đó, sử dụng tệp Sass chính của bạn để nhập các biến tùy chỉnh của bạn, tiếp theo là Bootstrap:

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

Để biên dịch Bootstrap, hãy đảm bảo rằng bạn cài đặt và sử dụng các trình tải bắt buộc: sass-loader , postcss-loader với Autoprefixer . Với thiết lập tối thiểu, cấu hình gói web của bạn phải bao gồm quy tắc này hoặc quy tắc tương tự:

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

Nhập CSS đã biên dịch

Ngoài ra, bạn có thể sử dụng CSS sẵn sàng sử dụng của Bootstrap bằng cách chỉ cần thêm dòng này vào điểm nhập dự án của bạn:

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

Trong trường hợp này, bạn có thể sử dụng quy tắc hiện có của mình cssmà không cần bất kỳ sửa đổi đặc biệt nào đối với cấu hình webpack, ngoại trừ bạn không sass-loaderchỉ cần trình tải kiểu và trình tải css .

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