2013-04-23 11 views
11

Làm cách nào để biên dịch một thư mục các tệp .less (chẳng hạn như Bootstrap-3.0.0-wip) được đưa vào dự án web Visual Studio 2012 MVC?Làm cách nào để biên dịch thư mục Bootstrap-3.0.0-wip ít thành .css với Visual Studio và Web Essentials 2012?

Tôi có thể biên dịch. Thành .cs với các công cụ bên ngoài, nhưng không rõ cách biên dịch các tệp .less thành .css như một phần của bản dựng với Visual Studio mới nhất. (bất chấp khả năng tương thích .less được cung cấp bởi các plugin VS hiện tại *) Tôi có thể thấy kết quả biên dịch của các tệp .less trong cửa sổ xem trước, nhưng tôi không thể tìm ra cách lưu đầu ra hoặc biên dịch nó tự động khi tôi chạy dự án.

* VS 2012,2 cập nhật, Microsoft công cụ Web Developer và Web Essentials 2012

Trả lời

3

Căn cứ vào số changelog cho Web Essentials, tôi muốn nói điều này đã được sửa vào ngày 31 tháng 7 năm 2013 ("Cố định LESS tương đối @import vấn đề"). Tôi chỉ cần thử này với Visual Studio 2012 (Update 3) và mới nhất của Web Essentials 2012 và Bootstrap 3.0 trong một dự án MVC 4, và nó có vẻ làm việc tốt (đặc biệt, nó đã được tạo ra bootstrap.css từ bootstrap.less).

Đối với bất kỳ ai muốn làm như vậy, tất cả những gì tôi đã làm sau khi cài đặt Web Essentials là thêm các tệp .less vào thư mục Css của tôi, thêm tệp boostrap.js vào thư mục Scripts của tôi, thêm tệp phông chữ vào thư mục Fonts của tôi (Bootstrap bây giờ sử dụng phông chữ thay vì một hình ảnh sprite), và bao gồm các file bootstrap.css và bootstrap.js đã biên dịch trong khung nhìn chính của tôi. Lưu ý rằng tôi cũng đã nhấp chuột phải vào một trong các tệp .less để tạo ra các thiết lập giải pháp (một số tệp cấu hình được sử dụng bởi Web Essentials). Và để có được tệp .css được tạo lần đầu tiên, tôi chỉ thực hiện một thay đổi bề ngoài và lưu nó.

+0

Cảm ơn bạn đã cập nhật! Những sự giúp đỡ đó. –

5

Làm thế nào để có được .less để biên dịch để .css với Essentials Web 2012

Để biên dịch một file .less với VS 2012 + Web Essentials 2012, các tệp .less của bạn phải không có lỗi. Mỗi tệp .less yêu cầu nhập hoặc mixin phải chỉ định tệp đó. Đánh dấu tệp .less của bạn và xem trước đầu ra trong ngăn xem trước. Nếu có lỗi được chỉ định, biên dịch của bạn thành .css sẽ không hoạt động.

Nó cũng giúp thiết lập tùy chọn Web Essentials để biên dịch tệp .less khi xây dựng.

Tools > Options > Web Essentials > LESS > Compile On Build = TRUE 

Bạn cũng có thể đặt để biên dịch thành thư mục 'css' bằng cách đặt như sau.

Tools > Options > Web Essentials > LESS > Compile to 'css' folder = TRUE 

Thiết lập này sẽ tạo ra một thư mục CSS trong thư mục LESS nơi nó đặt một [filename] .css và [filename] tập tin .min.css cho mỗi .less tập tin nó thu thập trong quá trình xây dựng.


Là tại sao thư mục .less Bootstrap-3.0.0-WIP sẽ không biên dịch với Essentials Web năm 2012 (+ VS 2012)

a) Nó sẽ không biên dịch để .css file nếu có bất kỳ lỗi nào xây dựng các tệp .less.

b) Web Essentials 2012 (+ VS 2012) chưa xuất hiện để nhận ra nhiều tệp .less trong một thư mục được nhập bởi một tệp điểm nhập duy nhất, chẳng hạn như tệp bootstrap.less trong Bootstrap 3.0-wip (trừ khi mỗi tệp liệt kê các mục nhập được yêu cầu của nó). Điều này có thể do chưa có cách nào để chỉ định tệp điểm nhập. Bởi vì điều này, hầu hết các tệp Bootstrap .less không biên dịch được vì chúng không có biến và mixin được định nghĩa. (vì tệp mixins.less và tệp variables.less đã được nhập vào các tệp riêng lẻ) Và vì chúng không biên dịch được, quá trình biên dịch .less -> .css không thành công.

c) Cách biên dịch một thư mục các tệp không phụ thuộc lẫn nhau (như của Web Essentials 2.7 là ghép tất cả các tệp lại với nhau thành một tệp .less lớn theo thứ tự chúng được liệt kê trong bootstrap.

d) Vì bước c là một nỗi đau tốn thời gian nên tôi khuyên bạn nên biên dịch ít tệp khởi động hơn với trình biên dịch bên ngoài ngay bây giờ. Ít nhất cho đến khi Web Essentials cho phép bạn thiết lập một điểm vào và biên dịch một thư mục các tệp không cần thiết phụ thuộc theo thứ tự bắt buộc.

11

Để biên soạn thư mục tệp Bootstrap .less với Visual Studio 2012 + Web Essentials 2012, bạn phải điều chỉnh một chút vì Web Essentials không thể biên dịch thư mục bootstrap less như được định dạng trên github.

Thêm bootstrap-3.0.0-wip folder vào dự án web Visual Studio. (dự án của tôi đã xảy ra là một dự án trống rỗng của ASP.Net MVC 4, nhưng nó không quan trọng.)

Di chuyển tệp bootstrap.less (điểm vào cho tất cả các tệp ít hơn của dự án) lên một thư mục, để lại tất cả các tệp khác trong thư mục \ less.

Nó sẽ giống như thế này:

bootstrap.less 
less\[all other less files].less 

Tiếp theo, chỉnh sửa các tập tin bootstrap.less thêm "ít \" thư mục prefix cho tất cả các báo cáo @import như sau:

// Core variables and mixins 
@import "less\variables.less"; 
@import "less\mixins.less"; 

// ...etc until all of the import statements include less\ at the start 

Bây giờ, hãy lưu dự án. Tệp bootstrap.less đã di chuyển phải được biên dịch thành tệp bootstrap.css và tệp bootstrap.min.css trừ khi bạn vẫn còn lỗi biên dịch. (xem danh sách lỗi để biết chi tiết)

Các tệp .less còn lại sẽ không biên dịch vì chúng vẫn có lỗi (không có câu lệnh @import trên từng tệp riêng lẻ), nhưng nó không quan trọng vì bạn đã biên dịch một tệp quan trọng.


Nếu bạn tích hợp Bootstrap3.0.0-wip mã nguồn trong dự án ASP.MVC 4, bạn có thể tận dụng gói MVC 4 để biên dịch các tệp JS.

Giả sử bạn thả mã nguồn Bootstrap vào một thư mục trong dự án của bạn/Content/bootstrap, thêm teh sau để tập App_Start \ BundleConfig.cs của bạn:

// Bootstrap 3 script bundle 
bundles.Add(new ScriptBundle("~/bundle/scripts/bootstrap_js").Include(
      "~/Content/bootstrap/js/bootstrap-transition.js", 
      "~/Content/bootstrap/js/bootstrap-alert.js", 
      "~/Content/bootstrap/js/bootstrap-button.js", 
      "~/Content/bootstrap/js/bootstrap-carousel.js", 
      "~/Content/bootstrap/js/bootstrap-collapse.js", 
      "~/Content/bootstrap/js/bootstrap-dropdown.js", 
      "~/Content/bootstrap/js/bootstrap-modal.js", 
      "~/Content/bootstrap/js/bootstrap-tooltip.js", 
      "~/Content/bootstrap/js/bootstrap-popover.js", 
      "~/Content/bootstrap/js/bootstrap-scrollspy.js", 
      "~/Content/bootstrap/js/bootstrap-tab.js", 
      "~/Content/bootstrap/js/bootstrap-typeahead.js", 
      "~/Content/bootstrap/js/bootstrap-affix.js")); 

(Lưu ý: Thứ tự các file js được lấy từ Makefile kèm theo dự án)

1

Điều này đã trở nên dễ dàng hơn nhiều và yêu cầu rất ít hành động. Trước hết, tôi đang sử dụng VS 2013, nhưng các bước phải giống nhau đối với VS 2012:

  1. Đảm bảo rằng Web Essentials được cài đặt đúng cách.
  2. Dưới Essentials Tools/Options/Web/LESS, đảm bảo rằng Auto-biên dịch các file phụ thuộc vào lưuĐúngfile Compile trên lưuĐúng.
  3. Nếu dự án Ứng dụng web của bạn hiện đang sử dụng gói NuGet được biên dịch trước Bootstrap hoặc nếu bạn thêm Bootstrap vào dự án của mình, hãy xóa nó.
  4. Sử dụng NuGet, thêm gói Bootstrap Ít nguồn vào dự án Ứng dụng web của bạn.
  5. Thêm bootstrap.less tệp mới vào ~/Content thư mục (MVC) của ứng dụng của bạn.
  6. Xóa toàn bộ nội dung của tệp này, sau đó nhấp và kéo tệp ~/Contents/bootstrap/bootstrap.less vào tệp này. Điều này sẽ tạo ra một @import "bootstrap/bootstrap"; mục nhập trong tệp mới của bạn.
  7. Để biên dịch tệp này thành tệp CSS, tất cả những gì bạn cần làm là lưu tệp (tức là nhấn CTRL-S hoặc nút Lưu tệp).
  8. Nếu bạn thực hiện bất kỳ thay đổi nào đối với các tệp, tất cả những gì bạn cần làm là lưu lại tệp này.

Làm theo cách này sẽ cho phép bạn dễ dàng cập nhật gói NuGet khi có phiên bản mới. Bạn có thể thêm bất kỳ thay đổi ít biến nào sau dòng @import.

ENJOY!