Ionic3: cách tốt nhất để nhập css từ node_modules

Question

Tôi đang cố gắng nhập tệp .css từ gói full-calendar.

Trước tiên, tôi đã tạo thành phần mới lịch của tôi (html, scss, ts).

Sau đó, tôi đã cố gắng 3 cách khác nhau nhưng chỉ có người cuối cùng làm việc cho tôi:

1. tham khảo các tập tin trực tiếp, như các tài liệu đề nghị, trong index.html (nó không hoạt động vì tham chiếu đến node_modules bị mất khi bạn xây dựng dự án)

   <link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">

2. Thêm @import "~fullcalendar/dist/fullcalendar.min.css"; trong my-calendar.scs s. Nếu tôi không sai, điều này sẽ thêm phong cách vào main.css khi dự án đang được xây dựng (không phải đang làm việc)

3. Tạo tùy chỉnh sao chép cấu hình (copy.config.js)

   module.exports = { 
       ... 
       copyFullCalendar: {  
       src: ['{{ROOT}}/node_modules/fullcalendar/dist/fullcalendar.min.css'],  
       dest: '{{BUILD}}'  
       } 
   } 
   

   và thêm @import "fullcalendar.min.css"; vào my-calendar.scss

UPDATE:
và thêm @import "fullcalendar"; vào my-calendar.scss
để tránh các lỗi biên dịch khi sử dụng ion build --aot --minifycss - -minifyjs

Tôi sẽ đánh giá cao nếu ai đó có thể làm rõ cách tốt nhất và giải thích nếu tôi hiểu lầm một số khái niệm.

PS: Hãy nhớ rằng tôi đang làm việc với Ionic3 và tôi không sử dụng CLI góc.

Answer 1

phương pháp thứ ba của bạn sẽ là cách tốt nhất để thực hiện, nhưng nó có thể được thực hiện theo cách khác giống như ion. Bạn cần phải tận dụng các includePaths khi cấu hình các con đường tùy chỉnh, như chúng ta đang đối phó với tùy chỉnh css, thêm sass.config.js vào thư mục dự án địa phương nơi chúng tôi cấu hình includePaths tùy chỉnh như thế này

includePaths: [ 
    .... 
    'node_modules/ap-angular2-fullcalendar' 
], 

Trong package.json kịch bản để bao gồm tùy chỉnh css tập tin cấu hình, như thế này:

"scripts": { 
    ..... 
    "ionic:serve": "ionic-app-scripts serve -s ./config/sass.config.js" 
}, 

Chỉ có vấn đề với việc thực hiện này là khi bạn cập nhật ionic-app-scripts bạn phải so sánh bản địa sass.config.js tập tin vào tập tin địa phương và kiểm tra xem có điều gì thay đổi.

Đây là một phương pháp phiền hà và một vấn đề đã được nêu ra trong Github nhưng tiếc là họ đóng vấn đề với sự biện minh sau

Configs được mở rộng, vì vậy chỉ bao gồm các lĩnh vực mà bạn đang thay đổi. Mọi thứ khác sẽ kế thừa giá trị mặc định.