備忘録 MacBook Pro 環境構築６

2019.02.24　開発環境セットアップ

今回は、Visual Studio CodeでSASSをコンパイルする環境を作る。

参照：https://arrown-blog.com/scss-begin-with-visualstudiocode/

1.Node.js

Homebrewのインストール
Nodebrewのインストール
Node.jsのインストール

Homebrewはインストール済みなので、Nodebrewのインストールから。下記のコマンドで、Nodebrewのインストールから、Node.jsの最新版インストールまでを実行。

$ brew install nodebrew
$ mkdir -p ~/.nodebrew/src #次のコマンドでフォルダがないとエラーになる時があるので。
$ nodebrew install-binary latest
$ nodebrew use v11.10.0　#v11.10.0は作業実施時点の最新版
#この時点ではパスが通っていないので、下記を実施
$ echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bash_profile
（ターミナル再起動）
$ node -v
v11.10.0　#ここでインストールしたバージョンが出てくれば、無事インストール完了。

2.node-sassのインストール

$ npm install -g node-sass

3.作業フォルダにpackage.jsonを作って設定

Visual Studio Codeで作業をフォルダを開いた状態で、VSCodeのターミナルから下記コマンドを実行。

$ npm init
package name: (hoge) 
version: (1.0.0) 
description: 
（いろいろ聞かれるので、必要に応じて入力）
Is this OK? (yes) yes #最後にこれでいいかと聞かれるので、yesとタイプして完了。

作業フォルダに「package.json」ファイルが出来たら、それを編集。

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-sass": "node-sass (SASS/SCSSファイル名) (出力CSSファイル名) -w"　#この行を追加。"-w"は『ファイルを監視する』オプション。
  },
  "author": "",
  "license": "ISC"
}

「Command + Shift + P」でコマンドパレットを開き、「タスク：タスクの構成」を選ぶ。

さらに「npm build-sass」を選ぶと、tasks.jsonというファイルが生成され、下記のような内容が記載されている。

{
// tasks.json 形式の詳細についての資料は、
    // https://go.microsoft.com/fwlink/?LinkId=733558 をご覧ください
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "build-sass",
            "path": "hoge/",
            "problemMatcher": []
        }
    ]
}

「Command + Shift + B」がビルドを実行するショートカットキーなので、これを押して、「npm: build-sass」を選ぶ。

・・・とnode-sassによってSCSSファイルがコンパイルされて、CSSファイルが出力されるはずなんだが、「/bin/bash: npm: command not found」のエラーが出てしまう。

ターミナルから、「npm run build-sass」と打ってやると、ちゃんとpackage.jsonの記述に沿って、コンパイルしてくれるんだが・・・

どっかしらでパスが通ってないのが原因だとは思うが、VSCodeのコマンド経由でビルドする時と、ターミナル（と言っても、VSCodeのターミナル）でコマンド叩く時とで環境変数のPATHが変わってるのか？

一応、Visual Studio CodeでSASSのコンパイルが出来るようになったので、良しとするが・・・うーん、謎だ。

そういえば、MBAの時にも一度VSCode＋SASSを試そうとしたのだが、ずいぶんハマった記憶がある。（VSCode＋LESSはすんなり行ったが）

＊後で、いろいろ調べ直してみたところ、tasks.jsonの記述がマズかったようだ。

{
// tasks.json 形式の詳細についての資料は、
    // https://go.microsoft.com/fwlink/?LinkId=733558 をご覧ください
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Sass Compile",
            "type": "shell",
            "command": "node-sass hoge/style.scss hoge/style.css -w",
            "problemMatcher": []
        },
    ]
}

こうしてやるとうまく行った。ちなみに、情報元は英語の公式サイト。

英語だからと敬遠せずに公式読めってことか。