プログラミング

【簡単】VSCodeにScssを導入する方法【6STEPで解説】

こんにちは、駆け出しエンジニアのちゃーりーです。いつも私のブログを見てくれて、本当にありがとうございます。

さて、今回のテーマは「VSCodeでScssを使用する方法」です。

私は最近、エディタをAtomからVSCodeに変更したのですが、Scssの使用方法がよく分からなかったんです。

ネットで解決方法を調べ、なんとかScssが使えるようになったのですが、ネットの記事は少し分かりにくい・・・。

単に読み進めるだけだと、使えるようにならないんですよ。

ある程度、自分で試行錯誤しないとダメ。

それって、時間のロスですよね・・・。

そこで今回は、この記事を読むだけでVSCodeが簡単に導入できるよう、導入手順をまとめます。

「他の記事を読んでも上手くいかなかった・・・」という方に読んでもらえたら嬉しいです。

VSCodeでScssを使用する方法【6STEP】

下記の手順で進めていきます。

  1. VSCodeを開く
  2. 拡張機能を開く
  3. 検索窓に「Live Sass Compiler」と入力する
  4. 「インストール」を押す
  5. Scssファイルを作成する
  6. 「Watch Sass」を押す

STEP①:VSCodeを開く

VSCodeを開いてください。

STEP②:拡張機能を開く

下記のアイコンをクリックします。

拡張機能を開いている様子

STEP③:検索窓に「Live Sass Compiler」と入力する

検索窓に「Live Sass Compiler」と入力します。

検索窓の位置を説明する画像

STEP④:「インストール」を押す

緑色のインストールボタンを押してください。

インストールボタンを押している画像

下記画像のとおり、「アンインストール」と表示されていればOKです。

STEP⑤:Scssファイルを作成する

ここで、Scssファイルを作成してください。コンパイルしたいファイルが既に存在する場合は、そのファイルを開いてください。

他のサイトでは、このSTEPの説明が抜けていることがあります。私はSTPE⑥のあとにSTEP⑤をおこなったので、Scssがコンパイルされませんでした。

どうやら、Scssのコンパイルにあたっては、ファイルごとにコンパイルの指示を出さないといけないみたいです。

STEP⑥:「Watch Sass」を押す

画面の一番したに、青色か紫色の帯(ステータスバー)があります。

その帯の中に「Watch Sass」というメッセージが表示されています。

そのメッセージを表示すれば、自動でコンパイルが始まります。

Scssファイルの保存先を確認すると、コンパイルされたcssが保存されているでしょう。

他のサイトではステータスバーを「青色」と説明していることがあります。

私は初心者かつステータスバーが紫色だったので、「青色ってどこ!?」とパニックになってしまいました(今はなぜか青色です)。

紫色だったとしても、ちゃんと「Watch Sass」と表示されるのでご安心くださいね。

今回の内容は以上です。最後までご覧いただき本当にありがとうございました。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です