Webpack

Tìm hiểu cách đưa Bootstrap vào dự án của bạn bằng cách sử dụng Webpack.

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

Ngoài ra, bạn có thể nhập các plugin riêng lẻ nếu cần:

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

Bootstrap phụ thuộc vào jQuery và 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 cả hai vào việc package.jsonsử dụng của bạn npm install --save jquery popper.js.

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

Để 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: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

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