webdevqa.jp.net

Visual Studio 2017でless / sassファイルをコンパイルする方法

VS <= 2015では、less/sassファイルのコンパイルを担当するWebEssentialsエクステンションを使用できますが、現時点ではVS 2017はサポートされていません。

72
Mihail Shishkov

Web証明書は複数の拡張機能に分割されています。私はあなたが欲しい機能が今 Webコンパイラ 拡張にあると思います。

拡張なしでそれをしたいのなら、Gulpのようなタスクランナーを使うことができます。 GulpタスクをVSに統合する方法のチュートリアルについては、 こちら を参照してください。

84
Jimmy

更新 - 私が追加の答えを加えたので、このページを下に読んでください(これは私のために働くもう一つの長い意味はありません)。

私のように、Gulp、Grunt、Shriek、Wailのことを知らず、知りたくない人のために、Visual Studio 2015でSCSSファイルを自動的にコンパイルするようにすることもできます。以下の手順は私のために働いた。

最初にWeb Compiler用の古い拡張機能/ Nugetパッケージをアンインストールします(これが必要かどうかはわかりません)。

VSIXギャラリーのダウンロードページ に行き、Web Compilerをダウンロードすることを選択してください。

enter image description here

私は最初にツール/拡張と更新をVisual Studioで選択することによってこれを行ったことに注意してください。これはうまくいったようですが、部分的なSCSSファイルを変更してもCSSに自動的にコンパイルされないことがわかりました(私 だけが唯一のものではありません )。

これで、マスターSCSSファイルを右クリックして以下に示すオプションを選択できるはずです。これにより、プロジェクトのルートにcompilerconfig.jsonというファイルが自動的に作成されます(このファイルが既にある場合、この手順はおそらく不要です。

enter image description here

これ以降、すべて問題なく動作したようです。あー!この拡張機能のおかげでMads Kristensenに感謝します。

36
Andy Brown

簡単な答え:

6
S.Serpooshan

私の前の答えは数ヶ月間私のために働きましたが、今はもううまくいきません。コンパイルしようとすると、CompilerConfigスキーマに関する問題についてのエラーウィンドウにメッセージが表示され、これを解決できません(Googlingもインストール/アンインストールも助けにはなりません)。

そのため、代わりの答えは CompileSASS を使用することです。これははるかに単純なアドインですが、オンラインドキュメントは(はるかに)少ないですが、うまく機能します。私が見ることができる唯一の欠点は以下のとおりです。

  • 生成されたCSSはSCSSと同じフォルダにあるので、私はこれに対応するために私のウェブサイトの中で物事を少し動かさなければなりませんでした。そして
  • 私が見ることができる限り、生成されたCSSは縮小されているだけです。

アドインをインストールしたら(私はVS 2017を使用しています)、[ツール]> [オプション]に移動して設定を変更できます。

enter image description here

これで、仕事を再開できるようになりました。ところで、すべてのアドイン作者に感謝します。

5
Andy Brown

今はそれほど特定性の低いコンパイラもあります。 https://github.com/madskristensen/LessCompiler

2
Justin