Trang chủ
Bootstrap tut 7 : Sử dụng Parcel 0 (0)
Bưu kiện
Tìm hiểu cách đưa Bootstrap vào dự án của bạn bằng cách sử dụng Parcel.Ưu đãi trong thời gian có hạn: Nhận 10 hình ảnh Adobe Stock miễn phí.quảng cáo qua CarbonTrên trang này
Cài đặt bưu kiện
Cài đặt Gói bưu kiện .
Cài đặt Bootstrap
Cài đặt bootstrap dưới dạng mô-đun Node.js bằng npm.
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 cả hai vào mục đích package.jsonsử dụng của mình npm install @popperjs/core.
Khi tất cả sẽ hoàn thành, dự án của bạn sẽ có cấu trúc như sau:Sao chép
project-name/ ├── build/ ├── node_modules/ │ └── bootstrap/ │ └── popper.js/ ├── scss/ │ └── custom.scss ├── src/ │ └── index.html │ └── index.js └── package.json Nhập JavaScript
Nhập JavaScript của Bootstrap vào điểm nhập ứng dụng của bạn (thường là src/index.js). Bạn có thể nhập tất cả các plugin của chúng tôi trong một tệp hoặc riêng biệt nếu bạn chỉ yêu cầu một tập hợp con của chúng.Sao chép
// Import all plugins import * as bootstrap from 'bootstrap'; // Or import only needed plugins import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap'; // Or import just one import Alert as Alert from '../node_modules/bootstrap/js/dist/alert'; Nhập CSS
Để tận dụ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.
Tạo của riêng bạn scss/custom.scssđể nhập các tệp Sass của Bootstrap và sau đó ghi đè các biến tùy chỉnh được tích hợp sẵn .
Xây dựng ứng dụng
Bao gồm src/index.jstrước </body>thẻ đóng .Sao chép
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script src="./index.js"></script> </body> </html> Chỉnh sửa package.json
Thêm devvà buildcác tập lệnh trong package.jsontệp của bạn .Sao chép
"scripts": { "dev": "parcel ./src/index.html", "prebuild": "npx rimraf build", "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build" } Chạy tập lệnh nhà phát triển
Ứng dụng của bạn sẽ có thể truy cập được tại http://127.0.0.1:1234.Sao chép
npm run dev Tạo tệp ứng dụng
Các tệp đã xây dựng nằm trong build/thư mục.Sao chép
npm run build Lượt xem : 265
