Nhập bootstrap ít hơn để mở rộng một lớp tạo 404 trên glyphicons phông chữ

Question

Trong 2 ứng dụng kiễu góc, tôi chuyển từ css thô xuống dưới vì vậy mà tôi có thể viết:

.main-button { 
    .btn; 
    .btn-primary; 
    padding: 1em; 
} 

thay vì xếp chồng tên lớp ở khắp mọi nơi trong html của tôi . Để có được điều này để làm việc, tôi cần phải:

1. trong angular-cli.json, thay đổi:

   "defaults": { "styleExt": "css", "prefixInterfaces": false }

   để "styleExt": "less",

2. Đổi tên tôi foo.component.css-foo.component.less và cập nhật các foo.component.ts cho phù hợp.

3. Trong thành phần ít hơn, để có thể tham khảo các lớp bootstrap, tôi phải: @import "~bootstrap/less/bootstrap";

này hoạt động tốt, ngoại trừ rằng tôi bây giờ nhận được 404 lỗi trong trình duyệt giao diện điều khiển:

jquery-1.12.3.min.js:2 GET http://localhost:4200/node_modules/bootstrap/fonts/bootstrap/glyphicons-halflings-regular.woff2 (anonymous function) @ jquery-1.12.3.min.js:2i @ jquery-1.12.3.min.js:2fireWith @ jquery-1.12.3.min.js:2ready @ jquery-1.12.3.min.js:2K @ jquery-1.12.3.min.js:2 
foobar:1 GET http://localhost:4200/node_modules/bootstrap/fonts/bootstrap/glyphicons-halflings-regular.woff 
foobar:1 GET http://localhost:4200/node_modules/bootstrap/fonts/bootstrap/glyphicons-halflings-regular.ttf 

Tôi đã thử một vài biến thể trên @ biểu tượng-phông chữ-đường dẫn mà không thành công. Tôi đã kiểm tra các yêu cầu cho phông chữ trong tab mạng và xem http://localhost:4200/448c34a56d699c29117adc64c43affeb.woff2.

Tôi cũng đã cố gắng sử dụng sass/scss. Điều này đòi hỏi các mô-đun bổ sung bootstrap-sass với một chỉ thị bao gồm tương tự nhưng kết quả là chính xác như nhau.

Cách phù hợp để thực hiện việc này mà không gặp phải lỗi 404 là gì?

Điều này được phục vụ bởi ng serve, tất cả đều mặc định ở đó.

Answer 1

tôi đã cùng một vấn đề với sass:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; 
@import "~bootstrap-sass/assets/stylesheets/bootstrap"; 

https://github.com/igorzg/angular2-zero-to-hero/blob/master/ui/src/styles.scss

Vì vậy, ít phải ở trong bạn phong cách.ít:

$icon-font-path: "~bootstrap/fonts/"; 
@import "~bootstrap/less/bootstrap"; 

Answer 2

Angular-CLI sẽ nhóm phông chữ của bạn như thế này 448c34a56d699c29117adc64c43affeb.woff2. Nếu bạn muốn các tập tin thô, có thể bạn phải xuất bản chúng trên máy chủ của bạn ...

Answer 3

Hãy thử: ng set defaults.styleExt scss

góc-cli phải phù hợp toàn cầu và địa phương phiên bản

Run ng init kiểm tra những thay đổi trong tất cả các file tự động tạo ra

Cuối cùng ng build

Để giữ mọi thứ đồng bộ hóa cũng hãy thử:

git clone https://github.com/angular/angular-cli.git 
cd angular-cli 
npm link 

Đối với các phông chữ và tài sản, ngay bây giờ góc-cli giả định con đường dựa trên các tập tin nguồn:

"assets": [ "assets", "favicon.ico" ]