Visual Studio 2012 MVC Web プロジェクトに含まれる .less ファイル (Bootstrap-3.0.0-wip など) のフォルダーをコンパイルするにはどうすればよいですか?
外部ツールを使用して .less を .css にコンパイルできますが、最新の Visual Studio でビルドの一部として .less ファイルを .css にコンパイルする方法が明確ではありません。(現在の VS プラグインによって提供される .less 互換性にもかかわらず*) .less ファイルのコンパイル済み出力をプレビュー ウィンドウで見ることができますが、出力を保存する方法や、プロジェクトを実行するときに自動的にコンパイルする方法がわかりません。
*VS 2012.2 アップデート、Microsoft Web 開発者ツール、および Web Essentials 2012
Bootstrap .less ファイルのフォルダーを Visual Studio 2012 + Web Essentials 2012 でコンパイルするには、Web Essentials が github でフォーマットされたブートストラップのないフォルダーをコンパイルできないため、わずかな調整を行う必要があります。
bootstrap-3.0.0-wip フォルダーを Visual Studio Web プロジェクトに追加します。(私のプロジェクトはたまたま ASP.Net MVC 4 Empty プロジェクトでしたが、問題にはなりません。)
bootstrap.less ファイル (プロジェクトのすべての less ファイルのエントリ ポイント) を 1 つ上のフォルダーに移動し、他のすべてのファイルは \less フォルダーに残します。
次のようになります。
bootstrap.less
less\[all other less files].less
次に、次のように、すべての @import ステートメントに「less\」フォルダー プレフィックスを追加して、bootstrap.less ファイルを編集します。
// 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 ステートメントがないため) コンパイルされませんが、重要なファイルはコンパイル済みなので問題ありません。
ASP.MVC 4 プロジェクト内に Bootstrap3.0.0-wip ソース コードを統合すると、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 から取得されました)
Web Essentials 2012 で .less を .css にコンパイルする方法
VS 2012 + Web Essentials 2012 で .less ファイルをコンパイルするには、.less ファイルにエラーがない必要があります。インポートまたは mixin を必要とする各 .less ファイルは、それを指定する必要があります。.less ファイルを強調表示し、プレビュー ペインで出力をプレビューします。エラーが指定されている場合、.css へのコンパイルは機能しません。
また、ビルド時に .less ファイルをコンパイルするように Web Essentials オプションをセットアップするのにも役立ちます。
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) は、Bootstrap 3.0-wip の bootstrap.less ファイルなど、単一のエントリ ポイント ファイルによってすべてインポートされるフォルダー内の複数の .less ファイルをまだ認識していないようです (各ファイルが必要なインポートをリストします)。これは、エントリ ポイント ファイルを指定する方法がまだないためと考えられます。このため、ほとんどの Bootstrap .less ファイルは、変数と mixin が定義されていないため、コンパイルに失敗します。(mixins.less ファイルも variables.less ファイルも個々のファイルにインポートされているため) そして、それらがコンパイルに失敗するため、.less -> .css コンパイル プロセスは黙って失敗します。
c) 相互に依存する .less ファイルのフォルダーをコンパイルする方法 (Web Essentials 2.7 の時点では、すべてのファイルを 1 つの大きな .less ファイルに、bootstrap.less.
d) ステップ c は時間のかかる苦痛なので、今のところ、ブートストラップの少ないファイルを外部コンパイラでコンパイルすることをお勧めします。少なくとも、Web Essentials でエントリ ポイントを設定し、依存する .less ファイルのフォルダーを必要な順序でコンパイルできるようになるまでは。
Web Essentials の変更ログに基づくと、これは 2013 年 7 月 31 日に修正されたと思います (「LESS 相対 @import の問題を修正」)。MVC 4 プロジェクトで Visual Studio 2012 (Update 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 ファイルの 1 つを右クリックして、ソリューション設定 (Web Essentials で使用される構成ファイル) を生成したことに注意してください。.css ファイルを初めて生成するために、表面的な変更を加えて保存しました。
これは非常に簡単になり、必要な操作はほとんどありません。まず、VS 2013 を使用していますが、手順は VS 2012 でも同じです。
このようにすると、新しいバージョンが利用可能になったときに NuGet パッケージを簡単に更新できます。@import行の後に追加する変数の変更を減らすことができます。
楽しい！