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

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

前提条件

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

こいつですわ。

SCSSを書き出すときに別のディレクトリに書き出したい

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

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

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

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

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

Live Sass Compilerの設定で解決

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の開き方

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

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

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

HTML/CSS

Posted by bistro