本記事では、Visual Studio CodeでSCSS→CSSに変換(コンパイル)する時に便利な拡張機能Live Sass Compilerでcssファイルの出力先を変更する方法について解説しています。
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!
settings.jsonに設定を追加する
Live Sass Compilerでcssファイルの出力先を変更したい場合は、settings.jsonに設定を追加する必要があります。
まず始めに、Visual Studio CodeでLive Sass Compilerの拡張機能をインストールする画面に移動し、歯車マークの設定→拡張機能の設定をクリックします。

続いて、settings.jsonで編集をクリックします。※settings.jsonで編集は複数ありますが、どこから開いても問題ありません。
すると、settings.jsonファイルが開かれるので、下記のコードを貼り付け保存してください。ファイルの出力先を変更したい人は、savePathに設定されているpathを変更してください。
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
]
以上で設定が完了です。Live Sass Compilerを使用してコンパイルされたcssファイルの出力先を確認すると、savePathで指定したディレクトリになっていることが確認できます。
