nmp環境にせず、面倒なことせずのまま、VS CodeのみでSassコンパイルをするお手軽＆カンタンな方法をご紹介します。
VS Codeで簡単コンパイルする方法（拡張機能）
Live Sass Compailerインストール
「拡張機能」のところで検索窓に「Live Sass Compailer」を入れて探して、「インストール」を押して導入完了。
↓
初期設定だとこんな風にコンパイル生成されます
編集ファイル（SCSS）と同階層にCSSファイルが書き出される仕組みになっています。
└ … このファイルを編集する
└ … 同じ階層に生成されることになる
とりあえず編集ファイルと同じ階層でもいいやという人はこのままでOKです。
settings.json 設定方法
違う階層へCSSを書き出したい場合
例えば、私の場合は下記のような階層で、書き出しを希望。
└
└ … このファイルを編集する
└
└ … 同階層ではなく、cssというフォルダ内に書き出されて欲しい…
別階層に書き出したい場合は、下記のようにsettings.jsonに追加しました。
※settings.jsonは、拡張機能「Live Sass Compiler」の歯車マークを開くと編集リンクがあります。
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
}
]savePathにある~/../という部分は、編集scssファイルから見た、相対パス指定。
上記の書き方だと、scssフォルダ内のscssファイルから見て、一個上にあがったcssフォルダが指定されるという意味です。(チルダ~をつけるのがミソ)
CSSマップがいらない場合の指定
CSSマップの出力もいらないので下記を設定します。
"liveSassCompile.settings.generateMap": false不便な点：フォルタごと監視できません
このコンパイル方法だけだと、フォルダごと監視ができません。（あくまでファイル単位）
用途別に分割されたscssファイル（パーシャル）の数が多くなると（例：_vars.scss,_colors.scss等）全て自動コンパイルされたほうが圧倒的に楽だとは思います。
私はこれまで、WindowsにRubyを自分で入れてターミナル立ち上げて、start.batファイルを作り、フォルダごと監視(watch)できる方法でコンパイルしてきました。
でも、ちょうど出産のため仕事の最前線を数年離れていた間に、Ruby-Sassが2019年に終了してたというトンデモ事件に最近気づきましたｗ 今はDart-sassなんですね～
Dart-SassだとNode.jsでwatchかける必要あるのかな？
とはいえ、ターミナルの真っ黒画面であれこれするのに慣れていないデザイナー・コーダーも多いと思います。
私自身もNodeとかReactなどの真っ黒画面でコマンドぽちぽちするのは「実体」が見えない感がして苦手💦
そんな方は、「実体」が見えやすいGUIソフトのPreprosを利用したりするのもラクかもしれません。
↓
この記事を書いた人
パリスタデザイン事務所のWebデザイナー。
得意分野は、使い勝手についてきめ細やかに考えられたCMS設計・構築。
3児の母でもあります。ゲーム・パソコンが趣味。
好きが高じてEC事業部でPCや自作PCパーツ・ゲーミング関連グッズの販売も行っています。
お仕事のご依頼はこちらまで
パリスタデザイン事務所は、WordPressの構築/カスタマイズを得意としています。
Web制作に関するお仕事は、パリスタデザイン事務所までお気軽にお問い合わせください。
