VSCode拡張機能「EasySass」のCSS出力先を変える方法 TargetDirのパスの書き方も解説

エンジニア
この記事は約2分で読めます。

こんにちは、オノユウ(@yumaonodera_)です。

「scssファイルとは別のフォルダにcssが出力されるようにしたい!色々ググってその通りに設定しているはずなのにうまくいかない……誰か助けて……」

上記の疑問にお答えします。

 

もしかすると、あなたはググりまくって下記のような内容を参考にして設定したものの、うまくいかず戸惑っているのかもしれません。

正直言うと、上記の内容では非常に分かりづらいため、あなたが設定できないのも無理はないです。

 

ご安心ください。

本記事では、TargetDirのパス設定の仕方も含めて、EasySassのCSS出力先を変える方法を丁寧に解説します。

 

EasySassのCSS出力先を変えるには

下記の手順で設定できます。

  1. 歯車アイコンをクリック
  2. 「拡張機能の設定を構成します。」をクリック
  3. 「ワークスペース」をクリック
  4. CSS出力先のパスをクリック

下記画像を参考にして設定してください。

TargetDirのパスの書き方

「パスって自分の場合はどうやって書くんだ?」って人もいるかと思います。

相対パスを書くのは、VSCodeの機能を使って相対パスをコピーするのが確実です。

下記の手順で設定できます。

  1. CSSを出力させたいフォルダで右クリック
  2. 「相対パスをコピーをクリック」

下記画像を参考にしてコピーしてください。

 

パスがコピーできたら、先ほどのEasySass設定画面で、TargetDirのところにペーストすればOKです。

EasySassの設定は自動で保存されるので、他に特に操作する必要はありません。

これでCSS出力先が変更されたはずです。

 

この記事がもし役に立ったら、ツイッターもやっていますので、よければフォローしてください。

ブログやプログラミングや人生哲学について発信しています。

IT以外にも若者の生き方を参考にしたいという人はどうぞ。

オノユウのツイッター

コメント

タイトルとURLをコピーしました