[VSCode] Sass(Scss)コンパイルのやり方

VSCodeSassコンパイル方法

最近よく使うようになった、VSCode(Visual Studio Code)。

便利なんだけど、ちょっと使わないでいるとすぐ忘れてしまいます。

で、しばらく使わないでいたら、scssファイルのコンパイル方法を忘れてしまいました。

だめだね。

年だね。

というわけで、備忘録を!

忘れっぽいので、やはり記録を残しておかないとね。

とりあえず、taskes.jsonから、node-sassを実行するところまでは思い出した。

下の例では、「styles.scss」ファイルをコンパイルして、「styles.css」を出力しますよということでした。

 

でも、これじゃ特定のファイルしかコンパイルしてくれないよ

と思ったら、別のやり方でできるみたいですね。

なんでもルートフォルダ(VSCodeで開いているフォルダ)配下に gulp.js ファイルを作成して、これを呼び出すような tasks.json ファイルを作ればいいみたい。

ちょっとまだよく理解できていないけど、おまじないのようにやってしまおう。

こちらが tasks.json。

 

ファイル構成はこんな感じです。

vscodeエクスプローラ

 

そして、このやり方だと、ファイル名は特に気にしなくていいみたいです。

ためしに  styles.scss を test.scss(中身は同じだけど)に変更してコンパイルしてみました。

見事に test.css が出力されています。

ファイル名を変更してもコンパイルできるよ

参照されているSassの中身をコンパイルしてくれる

今回、テストとして、こんな感じの scss ファイルを作成してみました。

参照されているscssはちゃんとコンパイルできるのか

styles.scss が styles/_child.scss を参照するようにしてみました。

styles.scss

styles/_child.scss

styles.css

 

というわけで、css が正しく出力されていることがわかりました。

なるほど、うんうん。

ちょこっとだけ使い方が分かってきました。

 

 

手書きで設定できるのはいいけど、逆に言ったら、これ、いちいち自分で書かなきゃならんのか。。

めんどいね。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です