Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

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.

@moti_moti(もち もち)

【画像付き】VScodeでSassの設定手順

Last updated at Posted at 2022-09-21

①VScodeでSassの導入

拡張機能で「Live　Sass Compiler」と検索し、
↓の拡張機能をインストールします
kakutyou.PNG

②Sass利用準備

フォルダ内にSassファイル用のフォルダとSassファイルを作成します
sassファイル構成.PNG

③Sassのコンパイラを起動する

VScode下部のWatch Sassをクリックする
watchi.PNG
下のようなパネルが出て「Watching...」になれば完了です
表示.PNG

ワークスペースで書き出し設定

ワークスペース内にこのように記述を追加します
今回は通常CSSと圧縮CSSを出力させました
記述したら保存します
set.PNG

設定ができているか確認

CSSフォルダにCSSファイルが生成されていたら完了です
表示1.PNG

0
0
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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?