【SCSS 書き出し先】SCSSを別のディレクトリに書き出したい

2023年2月16日

SCSS書いてCSS書き出すってよくやってますよね。
僕は毎日やってます。

Contents

前提条件

VS CodeをWindowsで使ってます。Macでも使っていますが。
つまり「Live Sass Compiler」プラグインを使っていますよね？

こいつですわ。

基本的には同じフォルダに書き出す設定になっていると思います。
これってどうやって皆設定しているんでしょうか。

SCSSはscssディレクトリ、CSSはcssディレクトリに書き出したい！
みたいなことがあると思います。(僕はあんまり無いですが)

イメージとしてはこんな感じですね。

今回はassets/css/に書き出してみます。

さて、どのように設定すれば良いのでしょう。

style.css.mapとかが怪しいのかなと思っていたんですが、
これ実はLive Sass Compilerの設定で解決します。

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

上記をVSCodeのsettings.jsonにコピペするだけ。
savePathについては好みで設定してください。
VS Code側でも設定か～って感じですね。
これ案件毎に設定変えるの面倒ですね。

他に方法あったら教えてください。

VS Codeのsettings.jsonの開き方がわからない人はこちら

ショートカットキーで開きます。
Windowsの方は
「Ctrl + , 」
Macの方は
「command + , 」

メニューバーから開きたい方は「基本設定」 → 「設定」で設定画面を開きます。

Posted by bistro