如何使用Visual Studio和Web Essentials 2012將Bootstrap-3.0.0-wip less文件夾編譯為.css？

Question

如何編譯Visual Studio 2012 MVC Web項目中包含的.less文件（例如Bootstrap-3.0.0-wip）文件夾？

我可以使用外部工具將.less編譯為.css，但尚不清楚如何將.less文件編譯為.css，作為使用最新Visual Studio構建的一部分。 （盡管當前VS插件提供了.less兼容性*），我可以在預覽窗口中看到.less文件的編譯輸出，但是我無法弄清楚在運行項目時如何保存或自動編譯輸出。

* VS 2012.2更新，Microsoft Web開發人員工具和Web Essentials 2012

Answer 1

要使用Visual Studio 2012 + Web Essentials 2012編譯Bootstrap .less文件的文件夾，您必須進行一些調整，因為Web Essentials無法編譯github上格式化的bootstrapless文件夾。

將bootstrap-3.0.0-wip文件夾添加到Visual Studio Web項目。 （我的項目碰巧是一個ASP.Net MVC 4空項目，但這無關緊要。）

將bootstrap.less文件（所有項目較少文件的入口）移至一個文件夾，將所有其他文件保留在\\ less文件夾中。

它看起來應該像這樣：

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

接下來，編輯bootstrap.less文件，將“ less \\”文件夾前綴添加到所有@import語句中，如下所示：

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

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

現在，保存項目。 除非仍然存在編譯錯誤，否則應將移動的bootstrap.less文件編譯為bootstrap.css和bootstrap.min.css文件。 （有關詳細信息，請參見錯誤列表）

剩余的.less文件將仍然無法執行，因為它們仍然有錯誤（單個文件中沒有@import語句），但是，由於您已編譯了重要文件，因此這無關緊要。

---

如果將Bootstrap3.0.0-wip源代碼集成到ASP.MVC 4項目中，則可以利用MVC 4的捆綁功能來編譯JS文件。

假設將Bootstrap源代碼放入項目/ Content / bootstrap中的文件夾中，則將以下內容添加到App_Start \\ BundleConfig.cs文件中：

// 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"));

（注意：這些js文件的順序是從項目隨附的Makefile中檢索的）

Answer 2

如何使用Web Essentials 2012將.less編譯為.css

要使用VS 2012 + Web Essentials 2012編譯.less文件，您的.less文件必須沒有錯誤。 每個需要導入或混入的.less文件都必須指定它。 突出顯示.less文件，並在預覽窗格中預覽輸出。 如果指定了錯誤，則無法編譯為.css。

它還有助於設置Web Essentials選項，以在構建時編譯.less文件。

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

您還可以通過設置以下內容，將其設置為編譯為“ css”文件夾。

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

此設置在LESS目錄中創建一個CSS文件夾，在其中為在構建過程中編譯的每個.less文件放置一個[filename] .css和[filename] .min.css文件。

---

關於為什么Bootstrap-3.0.0-wip .less文件夾無法與Web Essentials 2012（+ VS 2012）一起編譯

a）如果構建.less文件有任何錯誤，它將不會編譯為.css文件。

b）Web Essentials 2012（+ VS 2012）似乎無法識別文件夾中的多個.less文件，這些文件都是由單個入口點文件導入的，例如Bootstrap 3.0-wip中的bootstrap.less文件（除非每個文件都如此）列出其所需的進口）。 這可能是因為尚無法指定入口點文件。 因此，大多數Bootstrap .less文件無法編譯，因為它們沒有定義其變量和mixins。 （由於mixins.less或variables.less文件已導入到單個文件中）並且由於它們無法編譯，因此.less-> .css編譯過程會靜默失敗。

c）編譯相互依賴的.less文件的文件夾的方法（從Web Essentials 2.7開始，是按照bootstrap.less中列出的順序將所有文件合並為一個大.less文件。

d）由於步驟c是一項耗時的工作，因此我建議暫時使用外部編譯器來編譯bootstrap較少的文件。 至少直到Web Essentials允許您設置入口點並以所需順序編譯依賴的.less文件的文件夾。

Answer 3

基於Web Essentials的變更日志 ，我想說這已在2013年7月31日修復（“相對LESS相對於@import的固定問題”）。 我剛剛在MVC 4項目中使用Visual Studio 2012（更新3）以及最新的Web Essentials 2012和Bootstrap 3.0進行了嘗試，並且看起來工作正常（特別是，它是從bootstrap.less生成bootstrap.css）。

對於任何想做同樣事情的人，在安裝Web Essentials之后我要做的就是將.less文件添加到我的Css文件夾中，將boostrap.js文件添加到我的Scripts文件夾中，將字體文件添加到我的Fonts文件夾中（Bootstrap現在使用字體而不是精靈圖片），並且在我的主視圖中包含已編譯的bootstrap.css和bootstrap.js文件。 請注意，我還右鍵單擊.less文件之一以生成解決方案設置（Web Essentials使用的某些配置文件）。 為了第一次生成.css文件，我做了一個表面的更改並將其保存。

Answer 4

現在，這變得容易得多，並且幾乎不需要采取任何措施。 首先，我使用的是VS 2013，但步驟與VS 2012相同：

1. 確保正確安裝了Web Essentials。
2. 在TOOLS / Options / Web Essentials / LESS下 ，確保保存時自動編譯依賴文件為True ， 保存時編譯文件為True 。
3. 如果您的Web應用程序項目當前正在使用預編譯的NuGet軟件包Bootstrap ，或者如果您手動將Bootstrap添加到項目中，則將其刪除。
4. 使用NuGet，將Bootstrap Less Source軟件包添加到Web應用程序項目中。
5. 將新的bootstrap.less文件添加到應用程序的〜/ Content文件夾（MVC）。
6. 刪除此文件的全部內容，然后單擊〜/ Contents / bootstrap / bootstrap.less文件並將其拖到該文件中。 這將創建一個@import“ bootstrap / bootstrap”; 在新文件中輸入。
7. 要將這個文件編譯成CSS文件，您需要做的就是保存文件（即按CTRL-S或“保存文件”按鈕）。
8. 如果您對文件進行了任何更改，則只需重新保存該文件即可。

這樣可以在有新版本可用時輕松地更新NuGet軟件包。 您可以在@import行之后添加任何較少的變量更改。

請享用！