angular-cli và bootstrap 4

Question

Tôi di chuyển các bước đầu tiên với góc 2, đặc biệt tôi sử dụng công cụ chính thức góc-cli để tạo dự án mới.

Tôi tạo ra một dự án mới theo cách này

ng new [my-project-name] 

Dự án đã được tạo ra một cách chính xác.

Sau đó tôi muốn cài đặt bootstrap 4 và tôi làm theo hướng dẫn chính thức trong trang angular-cli.

tôi cài đặt bootstrap với NPM:

npm install bootstrap@next 

và tôi thêm dòng ở góc-cli.json tôi:

"scripts": [ 
    "../node_modules/jquery/dist/jquery.js", 
    "../node_modules/tether/dist/js/tether.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.js" 
], 
"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.css" 
], 

trong đối tượng ứng dụng.

Khi tôi xây dựng các ứng dụng và chạy nó trong máy chủ với: ng serve

Tôi không tìm thấy trong index.html tài liệu tham khảo cho bootstrap css và javascript.

Tôi không hiểu liệu việc nhập tệp này tự động được thêm vào index.html của tôi hay tôi cần phải thêm nó theo cách thủ công.

Answer 1

Tôi không undesteand nếu nhập tệp này được tự động thêm vào index.html của tôi hoặc tôi cần phải thêm nó theo cách thủ công.

Bạn cần thêm nó một mình.

Answer 2

Khi bạn thêm tập lệnh và kiểu nhập vào tệp angular.cli.json, chúng sẽ được thêm vào phạm vi toàn cục. Cụ thể, chúng được thêm vào scripts.bundle.js và styles.bundle.js. Không cần phải thêm chúng vào index.html. Bạn nên tốt để đi sau khi dừng lại và khởi động lại ng phục vụ. Đối với biện pháp tốt, tôi chạy một npm xây dựng lại sau khi thực hiện thay đổi cho angular.cli.json.

Answer 3

Bạn không cần thêm bất kỳ thứ gì theo cách thủ công vào tệp HTML. Nó được thực hiện tự động cho bạn.

Dưới đây là lý do:

phong cách CSS của bạn sẽ được thêm vào tập tin styles.bundle.css. Vì vậy, bạn sẽ thấy liên kết sau đây đến biểu định kiểu trong nguồn HTML của bạn khi bạn chạy ứng dụng: <link href="styles.bundle.css" rel="stylesheet">. Nếu bạn nhấp vào styles.bundle.css trong trình duyệt, nó sẽ hiển thị cho bạn tất cả các kiểu mà nó đã biên dịch cùng nhau.

Một chi tiết khác quan trọng điều. Tôi cũng đề nghị bạn trao đổi thứ tự của các stylesheets trong file góc-cli.json của bạn như sau:

"styles": [ 
    "../node_modules/bootstrap/dist/css/bootstrap.css", 
    "styles.css", 
] 

Lý do cho sự thay đổi trên là tập tin của bạn được biên dịch và phục vụ theo thứ tự mà bạn cung cấp trong tệp angular-cli.json. Vì vậy, hãy nói rằng nếu bạn đã viết một số kiểu tùy chỉnh cho btn-primary trong styles.css, nó sẽ được ghi đè bởi bootstrap.css luôn và bạn sẽ không bao giờ thấy kiểu của bạn được áp dụng trong giao diện người dùng và bạn sẽ không thể tìm ra những gì đang xảy ra.

Nếu bạn hoán đổi thứ tự các tệp của mình như tôi đề xuất, kiểu bootstrap sẽ được tải trước, theo sau là kiểu tùy chỉnh của bạn, theo kiểu của bootstrap theo kiểu của riêng bạn. Đây sẽ là sửa chữa duy nhất bạn cần phải làm trong trường hợp của bạn ngay bây giờ và mọi thứ khác sẽ hoạt động trơn tru mà không cần bất kỳ nỗ lực nào từ phía bạn.