web-dev-qa-db-ja.com

Twitterをコンパイルする方法Bootstrap 3.0 LESS using Asp.net MVC 5 and Web Essentials 2013

Visual Studio 2013 RCとWeb Essentials 2013をセットアップしました。 ASP.Net MVC 5を使用してAzureクラウドサービスとWebロールを作成しようとしています。インストール済みTwitter Bootstrap Less Source 3.0and want tobundleall Web Essentials 2013を使用したlessファイル。

実行時にbootstrap.lessをバンドルする方法、または設計時にbootstrap.cssにコンパイルする方法についてのヘルプやドキュメントはありませんでした。

それをどのように行うことができるか考えていますか？ BundleTransformer.Less よりも簡単な方法はありますか。

lesstwitter-bootstrap-3visual-studio-2013asp.net-mvc-5web-essentials
17
Santosh

更新（2015年9月29日）：

Web Essentialsを終了し、CleanCSSプラグインと一緒にLESSコンパイラを使用します。

  1. Windows用の Node.js （32ビット）をダウンロードしてインストールします。
  2. Node.jsコマンドプロンプトを開きます。
  3. インストール [〜＃〜] less [〜＃〜] コマンドを使用して： npm install -g less
  4. インストール less-plugin-clean-css 次のコマンドを使用します：npm install -g less-plugin-clean-css
  5. プロジェクトプロパティ>ビルドイベントに移動し、以下のコマンドをコピーしてビルド前イベントコマンドラインボックスに貼り付けます。
    lessc "$（ProjectDir）Content\bootstrap\bootstrap.less" "$（ProjectDir）Content\bootstrap.css" --clean-css = "-s1- -高度な "
  6. プロジェクトをビルドし、指定された場所でbootstrap.cssを探します。 （まだの場合は、ソリューションエクスプローラーで[すべてのファイルを表示]設定を有効にする必要がある場合があります。）
  7. Bootstrap.cssファイルをプロジェクトに含めます。ファイルのプロパティを表示し、その「ビルドアクション」を「コンテンツ」に設定します。 BundleConfigを更新して、このコンパイル済みファイルをStyleBundleに含めます。
  8. \ Content\bootstrapフォルダーからすべての.lessファイルを選択します。ファイルのプロパティを表示し、その「ビルドアクション」を「なし」に設定します。

更新（2014年9月24日）：

Twitter BoostrapがRECESSからGruntに切り替わったため、このソリューションを探している新しいユーザーには、 LESSコンパイラ または Grunt を検討することをお勧めします。

ここで言及されているソリューションのnoneはWeb Essentials 2013を使用していることに注意してください。

最後に、Twitterが推奨するRECESSを使うことにしました。 Visual Studio 2013（RC/RTM）を使用して事前に構築されたbootstrap 3少ないcssを使用する場合は、以下の手順に従います。

  1. Windows用の Node.js （32ビット）をダウンロードしてインストールします。
  2. RECESS npmパッケージをグローバルにインストールします– node.jsコマンドプロンプトを開き、次のコマンドを実行します。
    npmインストールリセス–g
  3. NuGetライブラリパッケージマネージャーを使用して、 Bootstrap Less Source 3.0.0 パッケージをAsp.Net MVC 5 Web/AzureにインストールしますWebロールプロジェクト。
  4. プロジェクトプロパティ>ビルドイベントに移動し、以下のコマンドをコピーしてビルド前イベントコマンドラインに貼り付けます：ボックス：
    recess "$（ProjectDir）Content\bootstrap\bootstrap.less" --compress> "$（ProjectDir）Content\bootstrap-compiled.css"
  5. プロジェクトをビルドし、指定された場所でbootstrap-compiled.cssを探します。 （まだの場合は、ソリューションエクスプローラーで[すべてのファイルを表示]設定を有効にする必要がある場合があります。）
  6. Bootstrap-compiled.cssファイルをプロジェクトに含めます。ファイルのプロパティを表示し、その「ビルドアクション」を「コンテンツ」に設定します。 BundleConfigを更新して、このコンパイル済みファイルをStyleBundleに含めます。
  7. \ Content\bootstrapフォルダーからすべての.lessファイルを選択します。ファイルのプロパティを表示し、その「ビルドアクション」を「なし」に設定します。
34
Santosh

同じアプローチサンプルで ' lessc 'コマンドを使用することは可能です：

   lessc "$(ProjectDir)Content\bootstrap\bootstrap.less"  "$(ProjectDir)Content\bootstrap-compiled.css"
8
Effectlab Criação de Sistemas