【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