Gulp sourcemaps and sass issues

Question

Tôi đang cố gắng hợp nhất tất cả các tệp kiểu (css, scss) thành một tệp và biên dịch. Lý do là vì có các tệp dựa trên các biến trong tệp khác, nhưng bây giờ tôi không thể tạo một bản đồ nguồn.

Tôi đang làm gì sai? Có giải pháp nào tốt hơn không?

Answer 1

Thực tiễn phổ biến là tạo tệp main.scss mà từ đó bạn nhập các bảng định kiểu khác của mình khi cần. Sử dụng kỹ thuật này sẽ giúp bạn tổ chức tốt hơn các phụ thuộc của bạn. Ví dụ nếu bạn có cấu trúc sau:

--app/style/ 
    --vendors/ 
    --vendors.scss 
    --utils/ 
    --utils.css 
    --base/ 
    --base.scss 
    --variables.css //here are all my variables 

Chỉ cần tạo một file main.scss dưới app/phong cách mà sẽ nhập khẩu tất cả các file khác của bạn:

@import 'base/variables'; //note that the order is important for variables 
@import 'vendors/vendors'; 
@import 'base/base'; 

bây giờ, cậu nhận thấy chúng tôi làm không chỉ định phần mở rộng của tệp? điều này quan trọng vì bạn sẽ muốn thay đổi tệp .css thành tệp .scss và hơn thế nữa bạn sẽ muốn thêm một dấu gạch dưới (_) vào tất cả các tệp không phải là tệp main.scss (đọc thêm về điều này here), cách bạn đảm bảo trình biên dịch sass không tạo ra một loạt các tệp css và đầu ra duy nhất của bạn sẽ là tệp main.css. Bằng cách này, bạn sẽ nhận được các sourcemaps bạn cần, lưu ý rằng hiện tại, bạn không chạy các tệp .css của bạn thông qua bất kỳ tác vụ sass nào vào lúc này, vì vậy bạn sẽ không nhận được các tệp sourcemaps cho các tệp này.

Có vẻ như rất nhiều việc phải làm nếu dự án của bạn đã lớn, nhưng điều này sẽ giúp bạn tiết kiệm rất nhiều rắc rối khi ứng dụng của bạn trở nên lớn hơn.