CONTACT

お問い合わせ

各種お問い合わせは
こちらからどうぞ。

RECRUIT

採用情報

新卒採用・キャリア採用の
情報を掲載中です。

Visual Studio CodeでのSCSSファイルのコンパイルについて
(DartJS Sass Compiler and Sass Watcher)

こんにちは。

今まで、HTMLとCSSのみでLPページ等を作成していましたが、
先日初めてSCSSファイルを作成し、CSSの管理を行いました。

今回はVisual Studio Code(以下、VSCode)で拡張機能<DartJS Sass Compiler and Sass Watcher>をインストールした場合の、SCSSのコンパイル方法を記載します。

・・─・・─・・─・・─・・─・・─・・─・・─・・─・・─・・─・・・・─・・─・・─・・─・・─・・─・

作業ツール

まずは作業に必要なツールです。

  • エディタ: Visual Studio Code
  • 必要な拡張機能: DartJS Sass Compiler and Sass Watcher

インストール方法

まず、VSCodeをインストールします。(既にインストール済みの場合は不要です。)
こちらは他のサイトでも手順が紹介されているので、割愛します。

次に、メニューの『拡張機能』からDartJS Sass Compiler and Sass Watcherをインストールします。

SCSSのコンパイルについての説明画像

インストール出来たら、プルダウンから『有効』にしましょう。

SCSSのコンパイルについての説明画像

CSSファイルのコンパイル場所の設定

次に、対象のプロジェクト内のどこにCSSファイルを置くかを設定します。

VSCodeの左下にある歯車アイコンをクリックして、「設定」をクリックしてください。

SCSSのコンパイルについての説明画像

設定を開き、「Dartsass: Target Directory」の入力欄まで移動します。
※上の検索バーに「dartsass」と入力すると探す手間が省けます。

「Dartsass: Target Directory」の入力欄に、コンパイルされたcssファイルを置く場所(パス)を指定します。

パスは、現在開いているフォルダからのパスとなっています。
(例)Testフォルダ(プロジェクト)内に、コンパイルされたcssファイルをcssフォルダ配下に置きたい場合、「css」と入力します。

SCSSのコンパイルについての説明画像

すると、コンパイルされたCSSファイルは以後、下図赤枠の『CSS』フォルダに格納されることになります。

SCSSのコンパイルについての説明画像

コンパイルさせるための設定は完了です。

SCSSファイルの作成と更新

プロジェクト内にSCSSファイルを作成し、更新します。
すると、CSSフォルダ内のCSSファイルが自動で作成されます!

SCSSのコンパイルについての説明画像

作成された後は、SCSSファイルを更新するたびにCSSファイルも自動更新されます。
そのため、編集する際はSCSSファイルを書き換えましょう。

☆下図:SCSSファイル更新後の、CSSファイルへコンパイル後のコード

SCSSのコンパイルについての説明画像

以上、VSCodeでDartJS Sass Compiler and Sass Watcherを使用した、 SCSSファイルのコンパイル方法でした!

コメント

この記事へのコメントはありません。

PAGE TOP