Hướng dẫn how do i watch a scss file? - làm thế nào để tôi xem một tập tin scss?

Tôi biết cảm giác: Bạn vừa cài đặt Sass, mong muốn đi sâu vào tất cả các tính năng tuyệt vời của nó và cuối cùng chuyển đổi dự án CSS cũ thành SASS. Bạn tạo tệp .SCSS đầu tiên của mình, crack Open Terminal, gõ một lệnh --watch, mọi thứ đều đến với HAULT. Bạn nhận được các lỗi như & nbsp; ________ 9, hoặc bạn nhận thấy SASS của bạn biên dịch cho thư mục sai, nhưng có thể tìm ra lý do tại sao.

Sau khi googling và thử một vài lệnh --watch, bạn kiểm tra tệp .css của bạn. Không. Điều này diễn ra trong gần một giờ. Vâng, điều này thật khó chịu, nhưng don Hãy để nó ngăn cản bạn vượt qua thế giới tuyệt vời của Sass.

Trong bài viết ngắn này, chúng tôi sẽ vượt qua một vài lệnh --watch đơn giản, ý nghĩa của chúng và cách khắc phục các lỗi có thể xảy ra.

--watch làm gì?

Lệnh --watch thực sự bảo Sass theo dõi dự án của bạn để thay đổi. Nó có những gì chuyển đổi các tệp SASS của bạn thành CSS và tự động biên dịch SAS của bạn mỗi khi nó thay đổi.

Ví dụ, lệnh này bảo Sass xem và biên dịch với một tệp cụ thể - về cơ bản, nó nói về xem dự án của tôi và biên dịch từ style.scss sang style.css,:

sass --watch style.scss:style.css

Sau đây là một lệnh tổng quát hơn tìm kiếm các tệp SASS và đồng hồ của bạn cho các thay đổi bên trong thư mục chứa các tệp SASS của bạn:

sass --watch .

Vì vậy, nếu tệp SASS của bạn nằm trong thư mục gốc, điều này sẽ tự động tổng hợp thành CSS trong thư mục gốc. Điều này có thể trở nên lộn xộn nếu, giả sử, bạn chỉ muốn các tệp SASS trong thư mục SCSS, vì lệnh

sass --watch .

Các lệnh tôi thích

Thông thường, để giữ cho dự án của chúng tôi tốt đẹp và ngăn nắp, chúng tôi sẽ muốn các tệp SASS và CSS của chúng tôi trong các thư mục riêng biệt. Chẳng hạn, nếu tệp SASS của chúng tôi nằm trong một thư mục có tên là SCSS, thì lệnh này sẽ biên dịch SASS của chúng tôi và cập nhật bảng kiểu bên trong thư mục của CSS CSS:

sass --watch scss/style.scss:css/style.css

Nếu bạn làm việc trên một dự án lớn với nhiều tệp SASS, bạn có thể nói với SASS chỉ cần xem thư mục SASS của mình và cập nhật thư mục CSS của bạn. Khi dự án của tôi được thiết lập, tôi muốn sử dụng lệnh:

sass --watch scss:css

Điều này cho SASS cho SASS xem thư mục SCSS cho các thay đổi, sau đó cập nhật bảng kiểu bên trong thư mục CSS.

Nếu lệnh --watch thành công, bạn sẽ thấy một thông báo như thế này trong đầu ra dòng lệnh:

sass --watch .

Bạn cũng có thể thấy một cái gì đó như:

directory css
    write css/style.css
    write css/style.css.map

Điều này đơn giản có nghĩa là nó đã tạo ra một thư mục CSS CSS có chứa một bảng kiểu và nguồn cung cấp. Hãy nhớ rằng: Bạn thậm chí không phải tạo thư mục CSS, bảng kiểu hoặc Sourcemap - lệnh --watch sẽ tạo chúng cho bạn!Remember: you don’t even have to create the css directory, style sheet, or sourcemap – the --watch command will generate them for you!

Thử nó. Vẫn không có xúc xắc.

OK, bây giờ bạn cần đảm bảo rằng bạn có trong thư mục làm việc phù hợp. Hãy nói rằng bạn có một thư mục trên máy tính để bàn của bạn có tên là Project Project. Mở thiết bị đầu cuối và nhập lệnh

sass --watch .

Khi bạn có trong thư mục dự án, hãy viết lệnh

sass --watch .

Đó là nó!

Bây giờ bạn là một ______ . Chỉ cần --watch yo sass sass.

Kiểm tra trang Sass Resources của chúng tôi để tìm hiểu thêm về việc đứng dậy và chạy với SASS.