実現したいこと

下記、ファイル設計でSCSSをCSSにコンパイルしたい。

コンパイル前のファイル設計

scss
 ├ bass
 ├ mixin
 ├ module
 ├ page
 │  ├ home
 │  │ └ style.scss …※２
 │  └ about
 │    └ style.scss …※２
 └ style.scss　…※１

※１はすべてのページで読むこむSCSSでbase,mixin,moduleファイルを読みこむ。
※２は各ページのみで使われる独自SCSS。
##コンパイル後のファイル設計

css
 ├ page
 │  ├ home
 │  │ └ style.css
 │  └ about
 │     └ style.css
 └ style.css

現状の実現できていない拡張機能の設定コード

"liveSassCompile.settings.formats":[
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/assets/css/"
    }
],

現状は"savePath": "/assets/css/"で※１を出力し、そのあとページをいじるごとに、上記ソースを触り出力先を変更している。

教えてほしいこと

ここを設定を都度都度変えることなく、自前のファイル設計を通りにコンパイルできる設定方法。

ご存じの方はご教授いただけますと幸いでございます。

補足情報(言語/FW/ツール等のバージョンなど)

vsCode　1.52．1
Live Sass Complier　5.6．1

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

回答1件

ベストアンサー

昔Live sass compilerのドキュメントを探してけど、階層維持のコンパイルは出来なかったと思う。
もしLive sass compilerを使うなら、下のように1階層にするか、

css
 ├ home.css
 └ about.css
scss
 ├ home.scss
 ├ about.scss
 ├_base.scss
 ├_mixin.scss
 └_module.scss

ネストするならそれぞれの階層ごとにcssとscssフォルダを作る構成にするしかないかと思います。この場合、settingでチルダを使えば実現可能です。

assets
 ├ home
 │  ├ scss - style.scss
 │  └ css - style.css
 ├ about.css
 │  ├ scss - style.scss
 │  └ css - style.css
 ├_base.scss
 ├_mixin.scss
 └_module.scss

LiveSassCompilerは個人の環境設定に依存するので個人開発にしか使えません。小規模な開発ならばフォルダ構成をLiveSassCompilerに合わせればいいでしょう。
複数人で共有するプロジェクトならば、タスクランナーを入れて環境に依存しないコンパイラーを用意する必要があると思います。gulpなどを入れれば階層維持のコンパイルも可能なので、複数人、大規模のプロジェクトならばLiveSassCompilerを捨てることをお勧めします。

投稿2020/12/21 07:11