Laravel Bootstrap không tìm thấy

Chúng tôi đang xây dựng một dự án Vite với Bootstrap từ đầu, vì vậy có một số điều kiện tiên quyết và các bước trước khi chúng tôi thực sự có thể bắt đầu. Hướng dẫn này yêu cầu bạn phải có Node. js đã được cài đặt và một số thông tin quen thuộc với thiết bị đầu cuối

1. Tạo một thư mục dự án và thiết lập npm. Chúng tôi sẽ tạo thư mục

   npm i --save bootstrap @popperjs/core
   

   1 và khởi tạo npm với đối số

   npm i --save bootstrap @popperjs/core
   

   2 để tránh nó hỏi chúng tôi tất cả các câu hỏi tương tác

   mkdir my-project && cd my-project
   npm init -y
   

2. Cài đặt Vite. Không giống như hướng dẫn về Webpack của chúng tôi, ở đây chỉ có một công cụ xây dựng phụ thuộc duy nhất. Chúng tôi sử dụng

   npm i --save bootstrap @popperjs/core
   

   3 để báo hiệu rằng sự phụ thuộc này chỉ dành cho mục đích sử dụng phát triển và không dành cho sản xuất

3. Cài đặt Bootstrap. Bây giờ chúng ta có thể cài đặt Bootstrap. Chúng tôi cũng sẽ cài đặt Popper vì trình đơn thả xuống, cửa sổ bật lên và chú giải công cụ của chúng tôi phụ thuộc vào nó để định vị chúng. Nếu bạn không có kế hoạch sử dụng các thành phần đó, bạn có thể bỏ qua Popper tại đây

   npm i --save bootstrap @popperjs/core
   

4. Cài đặt phụ thuộc bổ sung. Ngoài Vite và Bootstrap, chúng tôi cần một phần phụ thuộc khác (Sass) để nhập và gói CSS của Bootstrap đúng cách

Bây giờ chúng ta đã cài đặt và thiết lập tất cả các phụ thuộc cần thiết, chúng ta có thể bắt đầu tạo các tệp dự án và nhập Bootstrap

Cấu trúc dự án

Chúng ta đã tạo thư mục

npm i --save bootstrap @popperjs/core

1 và khởi tạo npm. Bây giờ, chúng ta cũng sẽ tạo thư mục

npm i --save bootstrap @popperjs/core

5, biểu định kiểu và tệp JavaScript để hoàn thiện cấu trúc dự án. Chạy phần sau từ

npm i --save bootstrap @popperjs/core

1 hoặc tạo cấu trúc thư mục và tệp theo cách thủ công được hiển thị bên dưới

________số 8_______

Khi bạn hoàn thành, dự án hoàn chỉnh của bạn sẽ trông như thế này

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

Tại thời điểm này, mọi thứ đã ở đúng vị trí, nhưng Vite sẽ không hoạt động vì chúng tôi chưa điền vào

npm i --save bootstrap @popperjs/core

7 của mình

Định cấu hình Vite

Với các phụ thuộc được cài đặt và thư mục dự án của chúng tôi đã sẵn sàng để chúng tôi bắt đầu mã hóa, giờ đây chúng tôi có thể định cấu hình Vite và chạy dự án của mình cục bộ

1. Mở

   npm i --save bootstrap @popperjs/core
   

   7 trong trình chỉnh sửa của bạn. Vì nó trống, chúng tôi sẽ cần thêm một số cấu hình soạn sẵn vào nó để chúng tôi có thể khởi động máy chủ của mình. Phần cấu hình này cho Vite biết nơi tìm kiếm JavaScript của dự án của chúng tôi và cách hoạt động của máy chủ phát triển (lấy từ thư mục

   npm i --save bootstrap @popperjs/core
   

   5 với tải lại nóng)

   const path = require('path')
   
   export default {
     root: path.resolve(__dirname, 'src'),
     server: {
       port: 8080,
       hot: true
     }
   }
   

2. Tiếp theo chúng ta điền vào

   mkdir {src,src/js,src/scss}
   touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
   

   0. Đây là trang HTML mà Vite sẽ tải trong trình duyệt để sử dụng CSS và JS đi kèm mà chúng tôi sẽ thêm vào trong các bước sau

   
   
     
       
       
       Bootstrap w/ Vite
     
     
       
   
         Hello, Bootstrap and Vite!
         Primary button
       
   
   
   
   
   

   Chúng tôi đang bao gồm một chút kiểu dáng Bootstrap ở đây với

   mkdir {src,src/js,src/scss}
   touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
   

   1 và để chúng tôi biết khi Vite tải CSS của Bootstrap

3. Bây giờ chúng ta cần một tập lệnh npm để chạy Vite. Mở

   mkdir {src,src/js,src/scss}
   touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
   

   2 và thêm tập lệnh

   mkdir {src,src/js,src/scss}
   touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
   

   3 được hiển thị bên dưới (bạn đã có tập lệnh thử nghiệm). Chúng tôi sẽ sử dụng tập lệnh này để khởi động máy chủ nhà phát triển Vite cục bộ của chúng tôi

   {
     // ...
     "scripts": {
       "start": "vite",
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     // ...
   }
   

4. Và cuối cùng, chúng ta có thể bắt đầu Vite. Từ thư mục

   npm i --save bootstrap @popperjs/core
   

   1 trong thiết bị đầu cuối của bạn, hãy chạy tập lệnh npm mới được thêm vào đó
   

Trong phần tiếp theo và phần cuối cùng của hướng dẫn này, chúng tôi sẽ nhập tất cả CSS và JavaScript của Bootstrap

Nhập Bootstrap

1. Thiết lập nhập Sass của Bootstrap trong

   npm i --save bootstrap @popperjs/core
   

   7. Tệp cấu hình của bạn hiện đã hoàn tất và phải khớp với đoạn trích bên dưới. Phần mới duy nhất ở đây là phần

   mkdir {src,src/js,src/scss}
   touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
   

   6—chúng tôi sử dụng phần này để thêm bí danh vào các tệp nguồn của chúng tôi bên trong

   mkdir {src,src/js,src/scss}
   touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
   

   7 để giữ cho quá trình nhập đơn giản nhất có thể

   const path = require('path')
   
   export default {
     root: path.resolve(__dirname, 'src'),
     resolve: {
       alias: {
         '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
       }
     },
     server: {
       port: 8080,
       hot: true
     }
   }
   

2. Bây giờ, hãy nhập CSS của Bootstrap. Thêm phần sau vào

   mkdir {src,src/js,src/scss}
   touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
   

   8 để nhập tất cả Sass nguồn của Bootstrap

   // Import all of Bootstrap's CSS
   @import "~bootstrap/scss/bootstrap";
   

   Bạn cũng có thể nhập riêng các biểu định kiểu của chúng tôi nếu muốn. để biết chi tiết

3. Tiếp theo, chúng tôi tải CSS và nhập JavaScript của Bootstrap. Thêm phần sau vào

   mkdir {src,src/js,src/scss}
   touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
   

   9 để tải CSS và nhập tất cả JS của Bootstrap. Popper sẽ được nhập tự động thông qua Bootstrap

   // Import our custom CSS
   import '../scss/styles.scss'
   
   // Import all of Bootstrap's JS
   import * as bootstrap from 'bootstrap'
   

   Bạn cũng có thể nhập các plugin JavaScript riêng lẻ nếu cần để giảm kích thước gói

   npm i --save bootstrap @popperjs/core
   

   0

   Đọc tài liệu JavaScript của chúng tôi để biết thêm thông tin về cách sử dụng plugin của Bootstrap

4. Và bạn đã hoàn thành. 🎉 Với mã nguồn Sass và JS của Bootstrap đã được tải đầy đủ, máy chủ phát triển cục bộ của bạn sẽ trông như thế này

   Bây giờ bạn có thể bắt đầu thêm bất kỳ thành phần Bootstrap nào bạn muốn sử dụng. Hãy chắc chắn kiểm tra dự án mẫu Vite hoàn chỉnh để biết cách thêm Sass tùy chỉnh bổ sung và tối ưu hóa bản dựng của bạn bằng cách chỉ nhập các phần CSS và JS của Bootstrap mà bạn cần

---

Xem một cái gì đó sai hoặc lỗi thời ở đây? . Cần trợ giúp khắc phục sự cố?

Làm cách nào để cài đặt bootstrap trong Laravel?

Làm cách nào để thêm bootstrap thủ công trong Laravel 8?

Làm cách nào để thêm mẫu bootstrap vào Laravel?

Đặt các tệp bootstrap ở đâu trong Laravel?