Cách biên dịch tệp less / sass trong Visual Studio 2017

Trong VS <= 2015, chúng tôi có thể sử dụng tiện ích mở rộng WebEssentials để biên dịch các tệp less / sass cho chúng tôi, nhưng hiện tại nó không hỗ trợ VS 2017. Bạn có biết về tiện ích mở rộng tương tự có thể biên dịch less / sass trên bản dựng không?

WebEssentials đang được chia thành nhiều phần mở rộng. Tôi tin rằng chức năng bạn muốn hiện có trong phần mở rộng Trình biên dịch Web .

Nếu bạn muốn làm điều đó mà không có phần mở rộng, bạn có thể sử dụng một trình chạy tác vụ như Gulp. Xem tại đây để biết hướng dẫn về cách tích hợp các tác vụ Gulp vào VS.

CẬP NHẬT - VUI LÒNG ĐỌC XUỐNG TRANG NÀY, NHƯ TÔI ĐÃ THÊM MỘT CÂU TRẢ LỜI BỔ SUNG (ĐIỀU NÀY KHÔNG CÒN CÓ THỂ LÀM VIỆC CHO TÔI).

Đối với những người, như tôi, những người không biết Gulp hoặc Grunt hoặc Shriek hoặc Wail, và không muốn, bạn CÓ THỂ tải Visual Studio 2017 để biên dịch các tệp SCSS của bạn một cách tự động, giống như cách sử dụng trong Visual Studio 2015. các bước dưới đây phù hợp với tôi.

Trước tiên, hãy gỡ cài đặt mọi tiện ích mở rộng / gói Nuget cũ cho Trình biên dịch Web (Tôi không biết điều này có cần thiết hay không).

Đi tới trang tải xuống bộ sưu tập VSIX và chọn tải xuống Trình biên dịch web.

Lưu ý rằng tôi đã thực hiện việc này trước tiên bằng cách chọn Công cụ / Tiện ích mở rộng và Cập nhật trong Visual Studio. Mặc dù điều này có vẻ hiệu quả, nhưng tôi phát hiện ra rằng các tệp SCSS một phần của tôi không được tự động biên dịch sang CSS khi tôi thực hiện các thay đổi đối với chúng (tôi không phải là người duy nhất ).

Bây giờ bạn có thể nhấp chuột phải vào tệp SCSS chính của mình và chọn các tùy chọn được hiển thị bên dưới, các tùy chọn này sẽ tự động tạo tệp có tên compilerconfig.json trong thư mục gốc của dự án của bạn (bước này có thể không cần thiết nếu bạn đã có tệp này) :

Kể từ thời điểm này, mọi thứ dường như hoạt động tốt. Phù! Nhân tiện, xin cảm ơn Mads Kristensen về tiện ích mở rộng này - bất cứ điều gì để tránh học một điều gì đó mới ...

Câu trả lời đơn giản:

• để biên dịch cả hai tệp LESS & SASS: Web Compiler hoặc Web Essentials 2017 (bao gồm nhiều phần mở rộng)
• để biên dịch chỉ SASS (SCss) fiels : CompileSass
• để biên dịch chỉ LESS tệp: LESS Compiler

Câu trả lời trước đây của tôi có tác dụng với tôi trong một vài tháng, nhưng bây giờ không còn hiệu quả nữa. Khi tôi thử biên dịch, tôi nhận được thông báo trong cửa sổ Lỗi về các sự cố với lược đồ CompilerConfig và không thể giải quyết vấn đề này (Google cũng không cài đặt / gỡ cài đặt được).

Vì vậy, một câu trả lời thay thế là sử dụng CompileSASS , là một phần bổ trợ đơn giản hơn nhiều, với (nhiều) ít tài liệu trực tuyến hơn, nhưng hoạt động rất đẹp. Nhược điểm duy nhất tôi có thể thấy là:

• CSS được tạo nằm trong cùng thư mục với SCSS, vì vậy tôi đã phải di chuyển mọi thứ xung quanh một chút trong trang web của mình để phù hợp với điều này; và
• CSS được tạo ra chỉ được rút gọn, theo như tôi thấy

Sau khi bạn đã cài đặt bổ trợ (tôi đang sử dụng VS 2017), bạn có thể đi tới Công cụ> Tùy chọn để thay đổi cài đặt:

Đây là hy vọng bây giờ tôi có thể tiếp tục công việc! Nhân tiện, cảm ơn tất cả các tác giả bổ trợ - không có nghĩa là thay đổi.

Bây giờ cũng có một trình biên dịch ít cụ thể hơn. https://github.com/madskristensen/LessCompiler