Bootstrap Basic tut 6: Webpack và các gói ( bundlers)

Tìm hiểu cách đưa Bootstrap vào dự án của bạn bằng cách sử dụng Webpack hoặc các gói khác.Sinh viên và Giáo viên, tiết kiệm tới 60% khi sử dụng Adobe Creative Cloud.quảng cáo qua CarbonTrên trang này

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):Sao chép

// 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:Sao chép

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 mục đích package.jsonsử dụng của mình npm install @popperjs/core.

Nhập kiểu dáng

Nhập Sass đã 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:Sao chép

@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ự:Sao chép

// ...
{
  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 thêm dòng này vào điểm nhập dự án của bạn:Sao chép

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 tại của bạn cho cssmà không cần bất kỳ sửa đổi đặc biệt để webpack cấu hình, ngoại trừ bạn không cần phải sass-loaderchỉ phong cách-loader và css-loader .Sao chép

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