sassのコンパイルに関して質問があります！！

現状

現在【vscode】『Live Sass Compiler』を使ってSassをコンパイルし、.cssに出力しています。

①現在
root
├ scss
│ └style.scss
├ css
・　└style.css

scss配下にcommonディレクトリを作って、style.scssを作ると下記の構成になる。↓

root
├ scss
│ └ common - style.scss
├ css
・　└style.css

commonディレクトリは作られない。

やりたいこと

scss配下にcommonディレクトリを追加し、scssファイルを作ったら、自動でcss配下にもcommonディレクトリが作られて欲しい。そしてその中にstyle.cssが作られて欲しい。

②やりたい構成
root
├ scss
│ └ common - style.scss
├ css
・　└ common - style.css

調べても参考になるサイトが見つからず、ご教授いただけますでしょうか。

※追記
【vscode】『Live Sass Compiler』の設定で
下記を設定しています！

{
"liveSassCompile.settings.formats": [

{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
],
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true
}

m.ts10806

2021/05/07 08:25

なにか自身で設定はされてますか？

nako01

2021/05/07 08:30 編集

【vscode】『Live Sass Compiler』の設定で下記を設定しています！ { "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/css" } ], "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.donotVerifyTags": true }

行動規範の内容に同意します

回答1件

ベストアンサー

Live Sass Compiler の保存設定に、scss以下のディレクトリ構造を再現するようなオプションはなさそうです。

代わりに、ファイルの存在を感知してコマンドを実行してくれる「File Watcher」というプラグインをつかってみたらどうでしょうか。

File Watcher

監視対象をフォルダにして、scss/commonフォルダ内にcssファイルが作成されたことを検知したらcss/commonフォルダにmoveするコマンドを実行すれば良いかと思われます。

例えばこんな設定で、/scss/common/style.scss を保存しLive sass Compiler がcssファイルを同フォルダに生成したのを検知し、moveコマンドでファイルを/css/commonフォルダへ移動できることを確認しました。

settings.json
1  "filewatcher.commands": [
2    {
3        "match": "scss\\common\\.*\.css$",
4        "isAsync": true,
5        "cmd": "echo '${file} -> ${workspaceRoot}' & move /Y ${file} ${workspaceRoot}\css\common",
6        "event": "onFolderChange"
7    }        
8  ]
9