【C#】MVC等でSCSSを使う方法【WebCompiler、VisualStudio】

記事内に広告が含まれています。

これまで、WEBサイトのデザインについては基本的なcssでの開発ばかりだったのですが、ふとSassの存在を目にすることがあり、どのように使うかを調べたのでそのメモです

一度できてしまえばとても簡単だったのですが、調べ始めたときは頭の中でうまく整理できずハマってしまいました…

同じように手こずってしまった人の助けになれば幸いです

スポンサーリンク

SCSSを使う方法（ざっくり）

SCSSを使うためのざっくりとした方法は以下の通りです

  1. VisualStudioに拡張機能「Web Compiler」をダウンロードする
  2. SCSSファイルをソリューションに追加
  3. SCSSファイルを右クリック⇒「Web Compiler」⇒「Compile file」の順にクリック
  4. compilerconfig.jsonファイルが作成される
  5. htmlにcssの参照を追加

こんなかんじです

私が詰まったのが、「Web Compiler」のダウンロードです

プロジェクトに入れるものだと思って、Nugetとかで探したり試したりしたのですが、思い通りにいかず…

VisualStudio自体へのダウンロードでした

ただ、このダウンロードさえできてしまえば、あとは流れるようにいけたので、そんなに難しいものではないと思います

スポンサーリンク

SCSSを使う方法（詳しく）

Web Compilerのダウンロード方法

せっかくなので私が詰まってしまったWeb Compilerのダウンロードについて少し詳しく

Web Compilerのダウンロード方法
  • ①
    VisualStudioを開く
  • ②
    「拡張機能」⇒「拡張機能の管理」をクリック
  • ③
    「Web Compiler」で検索し、「Web Compiler」をダウンロード

    ※VisualStudio2022を使う場合は画像のように「Web Compiler 2022+」になり、それ以外のVisualStudioの場合は「Web Compiler」になるようです

  • ④
    ダウンロードが完了するまで待つ
  • ⑤
    ダウンロードが完了したら、一度VisualStudioを閉じて、再度VisualStudioを起動する

これでWeb Compilerは使えるようになります

コメント