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):

// You can specify which plugins you need
import { Tooltip, Toast, Popover } 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';
...

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 việc package.jsonsử dụng của bạn npm install @popperjs/core.

Nhập kiểu dáng

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";

For Bootstrap to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer. With minimal setup, your webpack config should include this rule or similar:

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

Importing Compiled CSS

Alternatively, you may use Bootstrap’s ready-to-use CSS by simply adding this line to your project’s entry point:

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

In this case you may use your existing rule for css without any special modifications to webpack config, except you don’t need sass-loader just style-loader and css-loader.

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