前提
- ちょっと CSS や HTML を書いて試したい
- でもだんだん CSS の量が増えてきて「Sass/SCSS使いたいなあ…」と思い始めた
といった方向け（つまり自分向け）の記事です。
環境
- yarn 1.12.3
- sass 1.15.1
TL;DR
ディレクトリ構成
index.html
src
└ main.sass
build
└ main.css
node_modules
yarn.lock
package.json
package-lock.json
sass をインストール
$ yarn add --dev sass
ウォッチコマンドを定義
{
"dependencies": {},
"devDependencies": {
"sass": "^1.15.1"
},
"scripts": {
"sass-watch": "sass --watch src/main.sass build/main.css"
}
}
package.json で定義したスクリプトを実行
$ yarn run sass-watch
yarn run v1.12.3
warning package.json: No license field
$ sass --watch src/main.sass build/main.css
Sass is watching for changes. Press Ctrl-C to stop.
備考
sass のインストールは Yarn でも npm でもどちらでも良いと思います。いずれにせよ、 .sass ファイルを更新するたびにコンパイルが走ってほしいのでウォッチコマンドを定義しておくのが吉です。
あと、npm のパッケージにありがちなんですが、だいたい -g オプションつけてグローバルでインストールしろって言ってくると思いますが、ありゃあ無視した方が良さげです。ディレクトリやプロジェクトごとに使いたいバージョンも変わってくるので、基本的には package.json 内に閉じ込めておく方が管理が楽かと思います。