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


回答:


104

WebEssentialsは複数の拡張機能に分割されています。必要な機能は、Webコンパイラ拡張機能に含まれていると思います。

拡張機能なしでそれを実行したい場合は、Gulpのようなタスクランナーを使用できます。GulpタスクをVSに統合する方法のウォークスルーについては、こちらをご覧ください。


私はVS2019の拡張機能としてWebコンパイラを使用して、いくつかの非常に古い.lessファイルをコンパイルし、それでもうまく機能しています。
klewis

1
注:Webコンパイラは廃止されました。最後の更新は5年前です。いくつかの未修正の問題がありますが、ちょっと動作します。
アレックス

WebコンパイラはVS2019で機能しましたが、そのままでは自動再コンパイルされません。コンパイラconfig.jsonファイルを作成するには、コンパイルを手動で1回実行する必要があります(この回答を参照)。その後、.lessファイルを自動再コンパイルします。
neizan

49

更新-私は追加の回答を追加したので、このページを読んでください(これはもはや私のために働くとは思われません)。

私のように、Gulp、Grunt、Shriek、Wailを知らず、知りたくない場合は、Visual Studio 2015で使用したのと同じように、Visual Studio2017でSCSSファイルを自動的にコンパイルできます。以下の手順は私のために働いた。

まず、Webコンパイラの古い拡張機能/ Nugetパッケージをすべてアンインストールします(これが必要かどうかはわかりません)。

VSIXギャラリーのダウンロードページに移動し、Webコンパイラのダウンロードを選択します。

ここに画像の説明を入力してください

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

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

ここに画像の説明を入力してください

この時点から、すべてが正常に機能しているように見えました。ふぅ!ちなみに、この拡張機能を提供してくれたMads Kristensenに感謝します。何か新しいことを学ぶのを避けるために、何か...


6
このコメントがわかりません!受け入れられた答えがどれであるかはわかりませんが、私が与えたものとまったく同じものはありません。
アンディブラウン

1
受け入れられた答えは、緑色のチェックマークが付いたものです。現在、最も賛成票があり、同じWebコンパイラ拡張機能を使用することをお勧めします。とにかく写真のおかげであなたの答えが好きです。
ミハイルシシュコフ2018

1
ありがとう。私の答えは、Gulp / Gruntを使用せずに解決策を提供し、人々が必要とする追加の詳細も提供します。私は(とりわけ)チェックされた答えを見ましたが、上記の追加情報なしでは問題を解決しませんでした-したがって、これを解決するために費やしたのと同じ時間を他の人が無駄にするのを避けるために、投稿する努力をした理由。
アンディブラウン

1
受け入れられた答えを読んでみてください、それは同じことを言っていますが、Gulpの使い方も示唆しています
キースニコラス

OK、今では受け入れられた答えが同じことを言っているのがわかります-それで私のものはもっと詳細を追加するだけです。うまくいけば、私のような怠惰な読者はこれが役に立つと思うかもしれません!
アンディブラウン


5

以前の回答は数か月間は機能しましたが、現在は機能しません。コンパイルしようとすると、CompilerConfigスキーマの問題に関するメッセージが[エラー]ウィンドウに表示されますが、これを解決できません(グーグルもインストール/アンインストールも役に立ちませんでした)。

したがって、別の答えはCompileSASSを使用することです。これは、はるかに単純なアドインであり、オンラインドキュメントが(はるかに)少なくなっていますが、美しく機能します。私が見ることができる唯一の欠点は次のとおりです。

  • 生成されたCSSはSCSSと同じフォルダーにあるため、これに対応するためにWebサイト内で物事を少し移動する必要がありました。そして
  • 私が見る限り、生成されたCSSは縮小されます

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

ここに画像の説明を入力してください

仕事を再開できることを願っています!ちなみに、すべてのアドイン作成者に感謝します-気を悪くするつもりはありません。


1
今回はずっとスクロールして良かったです。私はちょうどあなたの前を追うところだった。回答。答えが機能しなくなったと思われる場合は、メモで更新する必要があります。:)
radbyx

チャームのように働いた。どうもありがとう。
radbyx

1
:あなたはすでにウェブコンパイラを持っており、この記事で説明したのと同じエラーに直面している場合は、ここに私の記事を参照stackoverflow.com/a/55290276/3609362 github.com/madskristensen/WebCompiler/issues/...
マット・G

Visual Studio 2019用のWebコンパイラをダウンロードしましたが、これまでのところ完全に機能しています。Visual Studio 2017に固有の問題はありますか?
アンディブラウン

2

あまり具体的でないコンパイラもあります。 https://github.com/madskristensen/LessCompiler


拡張機能をダウンロードしてインストールしました。次に、Site.lessファイルを開くと、コンパイラーで調整する透かしがどこにあるかがわかります。次に、自分のサイトでビルドを実行し、デバッグモードで開きました。Site.lessの下にあるSite.cssを開くと、Generatedwatermakがあります。次に、新しく追加されたプロパティを検索しようとしましたが、そこになく、CSSを取得できません。LESSを構築するためにそれを取得する方法についてのアイデアはありますか?
Caverman 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.