1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VSCodeでSassとLiveサーバを利用する

Last updated at Posted at 2022-06-01

HTMLのコーディングをするときに楽にやりたいですよね。
そんなとき役立つのがVSCode(Visual Studio Code)とLive Server + Live Sass Compilerです。
VSCodeはMicrosoft Storeからインストールしたり、Webサイトからダウンロードしてインストールしましょう。
もちろん無料です。

(画像はVSCodeのInsidersバージョンになっています)

拡張機能サイドバーを表示

Visual Studio Code(以下VSCode)を起動し「拡張機能」のアイコンをクリックする。

Live Sass Compiler を検索

Live Sass Compiler と入力し検索する。

インストール

一番上の拡張機能をインストールする。
念のため Ritwick Dey が作者であることを確認して、それをインストールする。
Live Sass Compilerが統合されて Glenn Marks のものに代わりました。それをインストールします。
インストールが終わったら、検索結果を削除してみる。

確認&エクスプローラーに移動

インストールされた拡張機能を確認する。二つ拡張機能がインストールされているはず。
確認したらエクスプローラー(VSCodeのファイルツリー)に移動する。

実際に使ってみる

目的のフォルダをVSCodeにドラッグ&ドロップする

フォルダを信頼する

最近はセキュリティの問題でフォルダを確認する必要があるみたい。

エディタにフォルダ読み込まれる

エクスプローラーにファイルの一覧が出るはず。
Go Live のアイコンをクリックすると、Liveサーバが立ち上がり、自動的にブラウザにプレビューが出る。
HTMLファイルを保存すると自動的にリロードされる。
Watch Sass をクリックすると、自動Sassコンパイルが開始される。
scssファイルやsassファイルを保存すると、cssファイルにコンパイルされる。

Windowsではファイアウォールで接続を許可する

WindowsではLiveサーバを起動すると、以下のダイアログが出るので許可する。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?