vscodeの拡張機能『Live Sass Compiler』 のcssの保存場所を変更する方法 (win10)
デフォルト設定だと.scssのコンパイル先は同階層になっているので変更する
▼デフォルト設定だと
root
├ scss
・ ├style.scss
・ └style.css
・
同階層に吐き出される
これを
↓↓↓↓
▼別階層に吐き出されるように設定したい
root
├ scss
│ └style.scss
├ css
・ └style.css
・
・
■変更方法
①vscodeのEXTENSIONS: MARKETPLACEの検索窓でsassと入力。
一覧からLive Sass Compiler を見つけ、右下の歯車マークをクリック
②configure extension settingsをクリック
③エディタにて表示された内容のうちLive Sass Compile › Settings: Formats欄を見つけ、edit in setting.jsonをクリック
④空のjsonができるので、その中身に以下を貼り付けて保存
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
]
}
以上。これで思いどおりの場所に吐き出されました。
（；；）今回の試行錯誤
まずpackage.jsonをマニュアルどおりに変更すればいいのかと思いきや、
書き換えても変化なし。
↓
別で制御してる設定ファイルがあるのか？と思い探してみるも
本体がどこにあってどのjsonを読み込んでるのかわからない。
↓
本体＆設定ファイルを探す
↓
見つかったけど設定変えても変化ないのであきらめかけたときvscode側で設定ボタン発見。流れでなんとなく設定したらできた。
探した場所
・プロジェクトフォルダ内(この階層のscssがコンパイルできていたので一応確認)
→結果：はずれ。ただ単にエディタで開いているscssをコンパイルする仕様だったっぽい
・C:\Program Files (x86)
→結果：はずれ。インストールされているならここかとも思ったが
・C:\Users\xxxx\.vscode\extensions\ritwickdey.live-sass-3.0.0\package.json
→結果：本体発見。しかしjsonいじっても変化なし
・C:\Users\xxxx\AppData\Roaming\Code\User\setting.json
→結果：あたり。前述の①～の方法で作ったファイルはここにあった
そもそもなぜritwickdey.live-sass-3.0.0\package.jsonを読み込んでないのかが解明できてなくてモヤモヤしてるが、ただ私はコンパイルをしたいだけで、、、ってことを鑑みるともうこれ以上時間かけたくないのでここで終了！
ってか\.vscode\って名前の階層あるくせに、\code\って。。。
何だよこの階層・・・これはわからないよぉ・・・
同じ苦しみを味わっている方の参考になれば嬉しいです。