LoginSignup
15

More than 1 year has passed since last update.

VSCodeでSCSSのビルド環境を作る

Last updated at Posted at 2018-06-27

なんども環境作ることになってめんどくさいので自分用メモ。
この記事はVSCode公式の方法に従って、拡張機能を使わずにビルド環境を作るメモです。

環境

  • OS X (11.0.1)
  • VSCode (1.63.2)
  • gulp (3.9.1)

公式

https://vscode-doc-jp.github.io/docs/languages/css.html
https://code.visualstudio.com/docs/languages/css

以下は上記公式の手順から、cssへビルドする部分だけを抜粋したものです。(URLが変わっていたので変更しました)

1. gulpのインストール

npm install -g gulp
npm install gulp gulp-sass gulp-less

インストールしたら gulp -vで確認

2. Gulpタスクを作成

VSCodeを開いてシンプルなscssを含むプロジェクトを作ります。

tasks.jsonを追加します。

Project/
 ├ .vscode/
 │    └ tasks.json
 │
 ├ styles/
 │    └ scss/
 │       └ main.scss
 │
 ├ index.html
 └ main.js

tasks.jsonの中身はこんなかんじ。最低限です。

{
    "version": "2.0.0",
    "command": "gulp",  // ここにgulpを指定
    "isShellCommand": true,
    "tasks": [
        {
            "label": "Sass Compile",
            "type": "shell",
            "command": "node-sass styles.scss styles.css",
            "group": "build"
        }
    ]
}

これでscssを保存したときに自動でcssを出力してくれる環境ができました。

タスクが動くか確認する

まずはscssファイルを用意します。この時点でプロジェクトのフォルダ構成はこんな風になってます。

hoge.scssの中身はサンプルとしてこんなものにしました。

/*このコメントは出力される*/
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
}

// 変数
$bk-color: darkblue;
$font-color: white;

// こっちのコメントは出力されない
#content{
    background-color: $bk-color;
    div {
        width: auto;
        height: 20px;
        color: $font-color;
        margin: 0 auto;
    }
}

タスクを動かす

command + shift + B を押すとタスクが起動します。複数のタスクがある場合は選択肢が出てきますが、「gulp: scss:watch [プロジェクト名]」を選択します。

うまく行けばTERMINALウィンドウにログが出るはず。エラーが出たら焦らずログを見て手順を確認しましょう。たいてい何かがインストールされてなかったり、jsonの書き方が間違っているのが原因です。

Finishedのログが出たら、hoge.scssファイルを保存します。gulpfile.jsで出力先として指定したパスにhoge.cssが作成されたら成功です。やったね!

cssフォルダは作っておかなくても自動で作成されます。ビルド後はこんなフォルダ構成になりました。

Project/
 ├ .vscode/
 │    └ tasks.json
 │
 ├ styles/
 │    ├ css/
 │    │  └ hoge.css
 │    │
 │    └ scss/
 │       └ hoge.scss
 │
 ├ index.html
 └ main.js

出力されたcssはこうなってます。

@charset "UTF-8";
/*このコメントは出力される*/
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
}

#content {
  background-color: darkblue;
}

#content div {
  width: auto;
  height: 20px;
  color: white;
  margin: 0 auto;
}

階層も変数もちゃんとビルドされてますね。outputStyleに指定した形式に応じて出力結果はかわりますが、とにかく.cssが作成されれば成功です。あとはゴリゴリscssを書くだけです。

ただし、scssにエラーがあるとタスクが止まってしまうので、こまめにターミナルウィンドウをチェックして正常にビルドされているか確認する必要があります。再度 command + shift + B で動かせばOK。タスクを止めたいときは command + shift + PからTask:Terminate Taskを選択すると停止できます。

以上、最低限のscssをVSCodeで自動ビルドする方法でした。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15